Day_7.(3)

知识点四、元素边框：border属性。border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

<style>

div{width: 500px;height: 500px;border:1px solid red;}

/*

border-width:1px;边框的粗细

border-style:solid;边框的风格

border-color:red;边框的颜色

=border:1px solid red;连写方式：线条粗细 线条风格 线条颜色

*/

</style>

知识点五、元素浮动：float属性。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注意：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

float属性常用值：

float：left—元素向左浮动。

float：right—元素向右浮动。

float：none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

float：inherit：规定应该从父元素继承 float 属性的值。

知识点六、清除浮动：clear：both;清除浮动，是为了原浮动元素占有空间，有实际宽高。

浮动产生副作用1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。2、边框不能撑开如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。