HTML5与CSS3学习⼼得
在学习Html5和CSS3过程中，布局都是⼜标签来进⾏填充⾃⼰的页⾯，然后通过css来进⾏对⾃⼰的界⾯进⾏修饰与装潢，打个⽐喻，你的body就⾏⼀个刚买的房⼦,⾥⾯的标签就像你把⾃⼰的房间如何规划,⽽css呢，就像你要把你的房⼦进⾏精装修⼀样.要选什么样的涂料，在房间喜欢什么样的窗帘，怎样舒适的沙发，还有如何布置⾃⼰美丽的卧室.
⾸先,Web前端的话，要想玩6这个东西,⾸先你要多多的练习，所说的练⼿，你要写⼤量的⽹页来练习，达到熟能⽣巧的地步，这样你就完美了，页⾯的布局⼤家都知道盒模型是⼀个布局的很重要的⼀个⽅式,⽆⾮就是玩的是margin啊,padding啊，把想让到什么地⽅的元素送到⾃⼰指定的位置就OK了.
在布局中熟练的掌握标签的特性是⾮常重要的,⽐如⾏块标签，什么是⾏标签，什么是块标签，如果你把⾏块标签弄混了，那么想要弄出⼀个特别漂亮的界⾯感觉不是很容易，所以呢.⼀定要知道,⾏块标签有哪些，以及⾏块标签的特性.下⾯总结⼀下⾏块标签有哪些及其特性.
⾏标签：（可以共⽤⼀⾏）strong em img a,b,i,s,u,input,span 块标签：（独占⼀⾏）h1-h6,p,div,hr,ul,ol,li,dt,dd,dl
标签嵌套原则:
1.a标签不能嵌套a标签
2.块标签可以任意嵌套（除了p，h，dt这三个标签可以嵌套⾏标签）
3⾏标签不能嵌套块标签
在布局中，还有⼀个很重要的布局⽅式，那就是传说中的浮动，浮动就是简单地让块的元素让他们⼿拉⼿站到同⼀排，当然这么说也不是很准确,⼤部分时候，浮动都是对块标签起作⽤的哈，让他们浮动起来，形成美好的界⾯德莱.那么，什么是浮动呢?浮动的核⼼思想：浮动让标签的布局脱离原来默认的⽂档流布局⽅
.浮动会让块元素失去独占⼀⾏的特性，在浮动这⼀层的标签可以共⽤⼀⾏.
.浮动标签后⾯的布局的标签会忽略被浮动的标签原来所占据的空间.
.浮动元素(只要⼀个标签加了float，他就叫浮动标签或浮动元素).
.浮动元素默认内容撑开宽⾼.
.浮动元素标签会发⽣层叠，但内容不会.
.
浮动造成的影响:⽗⼦间的影响和兄弟间的影响 overflowd;hidden clear:both
浮动清浮动
.display属性负责控制标签的显⽰⽅式
值为inline时，标签是⾏标签.
值为block时，标签是块标签.
值为inline-block时，标签为⾏块标签.
值为none时，标签不显⽰.
⾏块标签可以通过display属性的值相互切换.
浮动的⽅式有两种：左浮动和右浮动.下⾯来看⼀下我的代码
.div1{
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
/*float: right;*/
/*添加左浮动*/
float: left ;
}
.div2{
width: 200px;
height: 200px;
background-color: cyan;
margin: 10px;
/*float: right;*/
float: left;
}
.div3{
width: 200px;
height: 200px;
background-color: orange;
margin: 10px;
/*float: right;*/
float: left;
}
.father{html学多久
/* /*width: 680px;*/*/
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3 </div>
</div>
</body>
</html>
在这⾥我们定义了⼀个⽗集.father，在⽗集⾥我们定义了三个⼦集div，开始时候每个div是独占⼀⾏的⼤家都知道，当给每个⼦集div添加了浮动之后，他们会失去独占⼀⾏的特性，就像我刚开始说的⼿拉⼿站在了⼀排，这⾥要说⼀下浮动所造成的影响,⼀共会造成两种影响,⼀个是对兄弟之间造成的影响，另⼀个是对⽗集造成的影响. 清除对⽗集造成的影响我们⼀般⽤clear both ，看⼀下我下⾯的代码:
<style type="text/css">
.father{
width: 200px;
height: 200px;
margin: auto;
border: 1px solid black;
}
.one{
width: 100px;
height: 100px;
background-color: red; float: left;
}
.two{
width: 100px;
height: 100px;
background-color: blue; float: left;
}
.three{
width: 200px;
height: 100px;
background-color: green; /*float: left;*/
clear:both;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div> <div class="two">2</div> <div class="three">3</div> </div>
</body>
.father{
border: 1px solid black;
/*overflow: hidden;*/
/* float: left;*/
}
.one{
width: 100px;
height: 200px;
background-color: red;
}
.two{
width: 100px;
height: 200px;
background-color: yellow;
}
.three{
width: 100px;
height: 200px;
background-color: blue;
}
.father div{
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>
浮动对⽗集造成的影响我们也可以⽤浮动清浮动来解决，就是让⽗亲也浮动起来，对兄弟间造成的影响也可以这样，所以⼤家要灵活运⽤，在具体的地⽅寻合适的⽅法很重要
发表评论