页面都是由一个一个的盒子组成的，盒子就是块级元素标签
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
border : border-width || border-style || border-color
属性作用border-width定义边框粗细，单位pxborder-style边框样式birder-color边框颜色边框样式 border-style 可以设置如下值：
none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线dotted：边框为点线简写
border：1px solid red； 没有顺序
边框分开写
border-top: 1px solid red; /* 只设定上边框， 其余同理 */
边框粗细
border-collapse:collapse;
collapse 单词是合并的意思border-collapse: collapse; 表示相邻边框合并在一起注：边框会影响盒子的实际大小
padding 属性用于设置内边距，即边框与内容之间的距离
padding 属性（简写属性）可以有一到四个值。
当我们给盒子指定 padding 值之后，发生了 2 件事情：
内容和边框有了距离，添加了内边距。padding影响了盒子实际大小。 也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。注：不定义盒子的宽度，加内边距不会撑大盒子
控制盒子与盒子之间的距离
外边距使盒子水平居中
盒子必须指定宽度盒子左右外边距都设置为autodiv {
width: 960px;
margin: 0 auto;
}
常见的三种写法：
margin-left：auto；margin-right：auto；margin：auto；margin：0 auto；注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
简单来说就是两个盒子嵌套，里面的盒子想与父盒子有一定的距离，从而产生的问题
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网 页元素的内外边
* { padding:0; /* 清除内边距 / margin:0; / 清除外边距 */ }
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内 块元素就可以了
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。
border-radius:length;
参数值可以为数值或百分比的形式如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角分开写**：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius**注意：
默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效盒子阴影不占用空间，不会影响其他盒子排列text-shadow: h-shadow v-shadow blur color;
值描述h-shadow必需。水平阴影位置，x轴移动，有负值v-shadow必需。垂直阴影位置，y轴移动，有负值blur可选。模糊距离color可选。阴影的颜色。推荐RGB()选择器 { float: 属性值; }
属性值描述none元素不浮动left元素左浮动right元素有浮动大盒子套小盒子,小盒子( li 和 div都行 )设置浮动,横向排列
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> </head> <style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; } .box { width: 1226px; height: 285px; margin: 0 auto; background-color: pink; } .box li { width: 296px; height: 285px; background-color: #333333; float: left; margin-right: 14px; } /* 权重 */ .box .last { margin-right: 0; } </style> <body> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li class="last">4</li> </ul> </body> </html>大盒子套两个中盒子,中盒子套多个小盒子,除大盒子不浮动,其他浮动,横向排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动布局练习3</title> <style> .box { width: 1226px; height: 615px; background-color: pink; margin: 0 auto; } .left { float: left; width: 234px; height: 615px; background-color: purple; } .right { float: left; width: 992px; height: 615px; background-color: skyblue; } .right>div { float: left; width: 234px; height: 300px; background-color: pink; margin-left: 14px; margin-bottom: 14px; } </style> </head> <body> <div class="box"> <div class="left">左青龙</div> <div class="right"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </div> </body> </html>
页面布局的时候, 当子盒子太多, 无法定义手动定义父盒子的高度. 不给高度让子盒子把盒子撑开. 当子盒子浮动时, 不会撑开父盒子的高度,这时需要清除浮动
清除浮动本质就是清除浮动所造成的影响
选择器{ clear: 属性值; }
属性值描述left清除左侧浮动的影响right清除右侧浮动的影响both同时清除左右浮动的影响在最后一个浮动标签后添加一个块级元素, 给其添加clear属性即可
给父级标签添加overflow属性, 将其属性值设置为hidden | auto | scroll
缺点: 无法显示溢出的部分
父级class名字添加clearfix
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6, 7 专有*/ *zoom: 1; }