CSS第三天
盒子模型案例(昨日总结)
案例小结:
开发步骤:
- 分析页面结构(如果内容太多,可以后续补充)
- 编写公共样式
- 从上向下从第一个大盒子开始
(最外侧盒子需要有注释,辅助 CSS 分段和阅读) - 从上向下,从左向右依次编写小盒子样式,直到一个大盒子完成
- 如果小盒子比较复杂可以:
- 开始前增加背景颜色辅助调试
- 结束后删除背景颜色
分隔线的实现技巧:
使用 padding 可以让分割线比文本长
取消无序列表的小圆点:
list-style: none;
列选择快捷键:
ctrl + alt + shift + ↑ / ↓
布局时务必要注意 padding 和 border 会对影响盒子大小
CSS其他样式
边框和阴影
圆角边框
在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
圆角边框的效果:在边框的四周有一个圆形转角,让盒子视觉效果更好
圆角边框在网页布局中使用的多
圆角边框的属性:border-radius
圆角边框的使用
语法:
border-radius:length; (参数值可以为数值或百分比的形式 )
圆形:
border-radius: 50%;
正方形盒子是圆形 / 长方形盒子是椭圆
怎么做圆角矩形:
border-radius: 高度的一半;
长方形盒子(宽 > 高)
设置不同的圆角:
border-radius: 10px 20px 30px 40px; 左上 → 右上 → 右下 → 左下(顺时针)
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
盒子阴影
CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。
语法:
box-shadow: h-shadow v shadow blur spread color inset;
盒子阴影属性:
前两个数是方向,后两个数是半径,然后是颜色,最后一个几乎用不到。
示例代码:
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
盒子阴影不会影响盒子大小。
div 可以使用 :hover ;因为伪类是状态 / div 同样存在鼠标经过状态
浮动
传统网页布局的三种方式
传统网页布局的三种方式:
标准流(文档流)
浮动
定位
标准流(文档流)布局的方式:
标签按照规定好的默认方式排列(块级元素、行内元素);标准流是最基本的布局方式。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
浮动基础
float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 { float: 属性值; }
浮动能解决的问题:
- 让多个块级元素(不改变显示方式)水平排成一行
- 让两个块级元素一个左对齐,一个右对齐
网页布局的准则:
3. 多个块级元素纵向排列 —— 标准流
4. 多个块级元素横向排列 —— 浮动
浮动的概念:
float 属性用于创建浮动框,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动的方向以及语法:
左浮动: float: left;
右浮动: float: right
元素浮动后具有的三个特性:
1.脱离标准流(脱标)
2.一行显示并且顶部对齐
3.具有行内块元素的特性
总结:有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局,因为浮动可以改变元素标签默认的排列方式。
浮动特性-脱标
元素浮动后具有的三个特性:
- 脱离标准流(脱标)
- 一行显示并且顶部对齐
- 具有行内块元素的特性
盒子脱标后还不会保留原有位置;后续的盒子会占据被浮动盒子原有的位置
浮动特性-浮动元素一行显示
几个浮动元素之间不会有缝隙;并且会按照顶部对齐
如果父级盒子宽度装不下浮动的盒子,上一排空间不够的盒子会被挤下来
浮动特性-浮动元素具有行内块特性
行内元素可以使用浮动
行内元素浮动之后可以直接指定宽高
行内元素有了浮动属性后,可以指定宽高,不需要使用 display: inline-block 转换显示模式
没有给块级盒子设置宽度,默认宽度是父级盒子的宽度;浮动之后的宽度由内容来决定
浮动元素经常搭配标准流的父元素
在网页布局时,标准流的父盒子排列上下位置,这样标准流父盒子可以约束浮动的子盒子,按照我们布局要求在父盒子内排列
在网页布局时,浮动的子盒子负责在父盒子中横向排列里面填写内容
浮动小结
应用场景:与标准流的父盒子搭配使用
- 标准流父盒子负责上下
- 浮动子盒子负责左右
- 内容套在子盒子内部,子盒子最好不要既负责布局,又要负责内容
浮动的元素会脱标 —— 下方的盒子会占据原有的位置
父盒子中的所有亲儿子盒子一起浮动
浮动相比较 inline-block 的优势:
- 没有缝隙,可以精确控制盒子之间的距离
- 顶端对齐( inline-block 会按照文字对齐方式对齐)
初学浮动布局的痛点:
3. 务必要控制好每个盒子的宽度,宽度不够会掉下去
4. 用调试工具检查盒子位置最靠谱,千万不要盯着代码看
5. * {margin: 0; padding: 0} 不要忘
负责布局的盒子就只负责布局,不要监管内容。
盒子多能保证呆在靠谱的位置比什么都强,盒子位置对了,填写内容更容易。
盒子少既要负责布局,又要负责内容,稍微复杂就乱套。
结构永远最重要,结构乱了,CSS也无能为力。
清除浮动
不是所有父盒子都能准确指定高度,例如京东商城的产品特别多、新闻内容这些场景不方便指定盒子高度
如果子盒子全部浮动,父盒子的高度不能被撑开,因为盒子浮动后,会脱标,一旦脱标,原有位置不再保留
清除浮动的原因:
如果在开发时,不方便给父盒子指定高度,子盒浮动后(脱标),不占有原有位置,导致父盒子高度为 0,最终影响到下方的盒子
清除浮动本质以及额外标签法
清除浮动的本质:
清除浮动元素脱标后造成的影响
清除浮动后,父盒子可以根据浮动的子盒子自动检测高度,父盒子有了高度,就不会对下方的标准流造成影响了
清除浮动的属性:clear: both;
额外标签法的使用方法:
在浮动元素末尾添加一个空的 div
设置该 div 的样式为 clear: both;
额外标签法的优缺点:
优点:通俗易懂 / 书写方便 / W3C 推荐
缺点:添加许多无意义的标签,结构化较差
清除浮动之父元素 overflow
overflow 清除浮动的使用方法:
给父元素添加 overflow 属性,将其属性设置为 hidden 、 auto 、 scroll 都可以;
通常设置 overflow: hidden ;
overflow 清除浮动的缺点:
优点:代码简单 / 好记忆
缺点:无法显示溢出部分,面试会被追问
清除浮动之 after 伪元素
::after 伪元素清除浮动的代码:
.clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
伪类和伪元素:
- 伪类表示标签的某个状态,没有内容,用 : 表示
- 伪元素在标签前 / 后增加内容,有内容但是不需要独立的标签,用 :: 表示
- ::after 标签后添加内容
- ::before 标签前添加内容
清除浮动之双伪元素
双伪元素清除浮动的代码是:
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
清除浮动总结
清除浮动的原因:
子盒子浮动 → 脱离原有位置 → 父级没有高度 → 影响后续标准流盒子
方法: