1:文档流的概念,块元素,行内元素在文档流中的特点 2:盒子模型的组成部分,可见宽的大小由哪几部分组成 3:边框,内边距,外边距的设置 4:元素在其父元素中水平方向的位置由一下几个属性共同决定 5:何为过度约束,水平布局中,可以设置auto的三个值,设置后,浏览器如何调整 6:垂直布局溢出,用什么属性解决,有什么属性值 7:兄弟元素,父子元素外边距重叠的情况 8:盒子大小,盒阴影,圆角用什么属性设置?
01、文档流
元素在文档流中的特点 块元素: 1:会独占一行 2:块元素的宽度默认是父元素的100% 3:块元素的高度默认是被内容撑开的 内联元素(行内元素): 1:不会独占一行 2:宽度高度默认都是被内容撑开的,不能自己定义宽高 行内块元素 img display
02、盒模型
把元素布局到页面,就像想买个桌子,放到家里,要知道桌子的大小,形状,然后才能放到家里 所以我们把所有的元素都想成盒子、矩形 /* 盒模型、盒子模型、框模型(box model)*/ /* 买个冰箱 内容区 content 冰箱 内边距 padding 泡沫 边框 border 快递盒 外边距 margin 控制盒子的位置 冰箱离你的距离 */ /* 1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列 width 设置内容区的宽度 heigth 设置内容区的高度 */ /* 2:边框(border)元素设置边框 边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部 设置边框必须指定三个样式 边框的颜色、样式、大小
03、边框
<!-- 1:border-width 默认值一般是1-3px 使用border-width可以分别指定四个边框的宽度 4个值 上 右 下 左 3个值 上 左右 下 2个值 上下 左右 1个值 上下左右 除了border-width,CSS中还提供了四个border-xxx-width xxx的值可能是top right bottom left 专门用来设置指定边的宽度 2:border-color 设置边框的颜色 默认值是黑色 和宽度一样,color也提供四个方向的样式,可以分别指定颜色 border-xxx-color 3:border-style * 设置边框的样式 * 可选值: * none,默认值,没有边框 * solid 实线 * double 双线 * dashed [dæʃt] 虚线 * dotted ['dɔtid] 点状边框 * style也可以分别指定四个边的边框样式,规则和width一致, * 同时它也提供border-xxx-style四个样式,来分别设置四个边 * border * - 边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色 * - 而且没有任何的顺序要求 * - border一指定就是同时指定四个边不能分别指定 * border-top border-right border-bottom border-left * 可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效 -->
内容区的宽度和高度
width:
height:
边框元素设置
边框属于边缘,边框属于盒子内部
设置边框必须指定三个样式
边框的颜色、样式、大小
.box{
border-color: red;
border-style: solid;(设置实线,可选值可以为none、double、dotted、dashed,none那就没有边框)
border-width: 10px 10px 10px 10px;
对应的边框位置 上 右 下 左
border-width: 10px 10px 10px ;
对应的边框位置 上 左右 下
border-width: 10px 10px ;
对应的边框位置 上下 左右
border-width: 10px ;
对应的边框位置 上下左右共用一个值
(border-color和border-style也可以设置同样四个方向的值,如果不给颜色,默认是黑色)
border简写样式:
border: 颜色 样式 大小;(第二种样式的设置,颜色和样式和大小)
border-top:颜色 样式 大小;(第二种样式的设置,颜色和样式和大小)
border-right:颜色 样式 大小;(第二种样式的设置,颜色和样式和大小)
border-bottom:颜色 样式 大小;(第二种样式的设置,颜色和样式和大小)
border-left:颜色 样式 大小;(第二种样式的设置,颜色和样式和大小)
内边距:(和border语法很像几乎一样,也有简写)
内容区和边框之间的距离
padding-top: 颜色 样式 大小;
padding-right: 颜色 样式 大小;
padding-bottom:颜色 样式 大小;
padding-left: 颜色 样式 大小;
1、border-width 默认值一般是1-3px 使用border-width可以分别指定四个边框的宽度 4个值 上 右 下 左 3个值 上 左右 下 2个值 上下 左右 1个值 上下左右 除了border-width,CSS中还提供了四个border-xxx-width xxx的值可能是top right bottom left 专门用来设置指定边的宽度 2、border-color 设置边框的颜色 默认值是黑色 和宽度一样,color也提供四个方向的样式,可以分别指定颜色 border-xxx-color 3、border-style * 设置边框的样式 * 可选值: * none,默认值,没有边框 * solid 实线 double 双线 dashed [dæʃt] 虚线 * dotted ['dɔtid] 点状边框 * style也可以分别指定四个边的边框样式,规则和width一致, * 同时它也提供border-xxx-style四个样式,来分别设置四个边 * border * - 边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色 * - 而且没有任何的顺序要求 * - border一指定就是同时指定四个边不能分别指定 * * border-top border-right border-bottom border-left * 可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效
二、盒子模型
overfow可选值
overflow-y
overflow-x
visible
hidden 溢出的内容将会被
scroll 生成两个滚动条,通过滚动条来查看完整的内容
auto 根据需要生成滚动条
三、框模型(box model)
09、内联元素的盒子
行内元素的:不能设置
行内元素的垂直方向的内边距(padding)不会挤别的元素,只会折腾自己,但是水平方向会挤别的元素