初学Web笔记 css day03

一.盒子模型
1.边框
border-top/right/bottom/left: 宽度 线的类型 颜色
3个属性顺序不分先后
线的类型：solid 实线、dashed 虚线、 dotted 点状线
border-width 边框宽度
border-color 边框颜色 transparent 透明色
border-style 边框样式（线的类型）
border:none; 去除边框
2.内边距
padding: 10px; 上下左右相同
padding: 10px 20px; 上下 左右
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左
标准(W3C)盒模型
盒子实际宽度=内容宽度+左右内边距+左右边框
盒子实际高度=内容高度+上下内边距+上下边框
怪异盒模型
盒子实际宽度就是内容的宽度(width)
盒子实际高度就是内容的高度(height)
3.切换盒模型
box-sizing: content-box; 内容盒子(标准盒模型) —— 默认的
box-sizing: border-box; 边框盒子（怪异盒模型）
4.外边距
margin: 10px; 上下左右相同
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin-top/right/bottom/left 控制其中一个方向
上 右 下 左
5.盒子在网页中占的空间大小
水平方向：左右的外边距 + 盒子实际宽度
垂直方向：上下的外边距 + 盒子实际高度
二.行内元素的内边距
行内元素的水平方向的内边距正常生效；垂直方向会产生“视觉生效”，实际上没有生效。
练习：将b标签转为行内块，查看水平和垂直方向的内边距
三.外边距特点
1.外边距合并
(1)在文档流中，垂直方向的两个盒子之间的外边距会产生合并，取最大值。
(2)在父元素的第一个子元素中，设置上边距，会出现在父元素顶部
解决方法：
1.改用给父元素添加内边距
2.给父元素添加上边框
3.给父元素添加溢出隐藏属性
overflow:hidden;
2.通过外边距实现盒子水平居中
版心：指的是页面布局中主体内容所在的区域
盒子水平居中
margin: 0 auto;
3.外边距取值
正负值都可以使用，正值会增加距离，负值会减少，缩短距离
0距离是紧挨着
负值一旦使用可能会产生重叠的现象。
四.去除标签样式
标签中有自带的内外边距，需要去除这些样式
*{
margin: 0;
padding: 0;
}

text-align: 盒子文本水平对齐方式 left/center/right
HTML特殊字符
  在网页中产生空格
< <
> >
© 产生版权分号©
https://blog.csdn.net/jack_rose_me/article/details/124603494

课后任务：
(1) 复习今天内容，整理思维导图
(2) 练习：完成以下效果图
(3)