标签：元素 第三天 边框 padding HTML 设置 margin 属性
盒模型组成部分：
Margin：外边距 盒子外与其他元素的间距、距离
Border：边框 盒子的边框线条（属性：宽度、线条样式、颜色）
Padding：内边距 内容与盒子之间的距离
Content: 内容区域
Padding属性的使用：分别可以设置上右下左内容与父元素的距离。
-padding通常是给父元素设置的
-padding内边距的设置会将父元素撑大，为了不影响其布局，需要在宽高上减去相因大小。
-padding也可以在子元素中设置，依然会撑大当前元素的宽高大小
padding方向值
-padding:一个属性值时 表示上下左右都一致
-padding:有两个属性时 表示上下是第一个值，左右是第二个值。
-padding：有三个属性时 表示上第一个值 左右第二个值 下第三个值
-padding: 有四个值时 表示上 右 下 左 各一个值
-padding还可以使用padding-方向即可：
-padding-top / right / bottom / left
margin属性的使用
-margin通常用来设置同级元素之间的位置间距。
-哪个元素需要设置间距就给该元素添加margin外边距即可
-margin不会将当前元素的宽高大小撑大
margin方向值：
-margin:一个属性值时 表示上下左右都一致
-margin:有两个属性时 表示上下是第一个值，左右是第二个值。
-margin：有三个属性时 表示上第一个值 左右第二个值 下第三个值
-margin: 有四个值时 表示上 右 下 左 各一个值
-margin还可以使用margin-方向即可：
margin-top / right / bottom / left
Margin的常见bug:
-在父元素下只有一个子级元素给子级元素设置margin-top会错误解析到父级元素（父级元素会继承margin-top的值）
解决方法
-padding替代margin
-给父元素设置边框
-使用文本溢出属性：overflow:hidden
-两个同级元素设置margin-top/bottom 之间会取最大值。
-当子元素的大小占满父盒子时，设置margin值是，会导致元素溢出父盒子
文本大小：
font-size:数值
-在网页中蛇者字体大小的常见单位是像素px。
-文本大小在浏览器中初始默认值大小是16px。
-在浏览器中设置最小的自豪是12px（由于浏览器之间存在差异 规定页面中最小的字体是16px）
-可以设置比12px还小的字体 但是不建议设置。
-建议设置文本字号的时候为偶数 尽量不要使用奇数
-前端中除了px单位还有一些常见的单位
- % 百分比
- pt磅 硬件设备、打印机
- em 相对父级单位 首航缩进
- rem 移动端 相对于根元素html进行计算。
字体类型：
font-family
属性值：
-属性值可以是中文也可以是英文
-在浏览器中默认的字体类型是微软雅黑
-中文：当属性值是中文的时候 可以加引号也可以不加引号
-英文：当属性值是英文的时候 引文单词只有一个可以不加引号 有多个必须加引号
注意：设置的字体都是当前电脑中已经下载好的字体包。
加粗属性：
font-weight
-单位是整百数 100~900 600~900之间表示加粗 100~500表示正常的不加粗
-bold 加粗的
-bolder 更粗的
-normal 表示正常的 只使用加粗标签但 是不要加粗的样式。
倾斜属性:
font-style
-italic 倾斜
-oblique 更倾斜的
-normal 正常的 清除倾斜的默认样式
文本行高：
line-height:数值
文本行高的设置：设置的是文本上下方向的位置。
-设置行高等于容器高度 文本在容器垂直方向居中显示。
-设置行高大于容器高度 文本会往上移动
文职水平对齐方式 text-align
属性值
-left、right
-center
-justify
文本颜色的设置：
color:
-法定的属性值 英文单词
-十六进制
- # 开头
-在 # 后面有6位字符（0~9~ A~F）
-当 # 后面的六位字符相同的时候可以简写成三位 #000000=>#000
-rgb/rgba
-rgb(red,green,blue) 取值范围0~255
-rgba(red,green,blue,alpha) 透明度 0~1
-rgba可以给元素颜色设置透明
-opacity 表示透明 0 ~ 1
文本修饰属性:
text-decoration
属性值：
-underline 下划线
-overline 上划线
-line-through 删除线 <del>标签也能实现
-none 表示清除默认的下划线
首行缩进：
text-indent
-只针对第一行文本有作用
-属性值可以设置正数还可以设置负数
字间距：
中文汉字使用 letter-spacing
词间距
英文单词 word-spacing
列表：
列表里 无序和有序列表都有默认的符号样式，符号样式可以进行修改或者设置成自己的图片。
- 定义列表符号样式
属性：list-style-type
属性值：disc(实心圆)、circle(空心圆)、spuare(实心方块)、none（去掉项目符号）
- 设置图片作为列表符号样式
属性：list-style-image
属性值：url()
- 定义符号列表的位置
属性：list-style-position
属性值：inside outside(outside是默认值，设置后会将项目符号包裹进li里，这样清除浏览器默认边距时就不会将其清除)
- 简写列表属性
属性：list-style
属性值：none 清除列表的默认样式
边框：
边框的三个属性：
-边框的颜色 border-color:英文单词（后面的数值可以是英文单词、十六进制、rgb、rgba）
-边框的样式 border-style:solid(实线)、dashed(虚线)、dotted(点线)、double(双实线)
-边框的宽度 border-width:数值+单位
注意：边框默认是四个方向都是一样的
简写方法：border:宽度 样式 颜色
扩展：
- 修改顶部边框的宽度 border-top-width
- 修改右部边框的宽度 border-right-width
- 修改下部边框的宽度 border-bottom-width
- 修改左部边框的宽度 border-left-width
- 清除默认的边框样式：border:none
背景：
- 背景颜色
背景：background-color/background
属性值：英文单词、十六进制、rgb、rgba
- 背景图片
属性：background-image
属性值：url()
-当容器大于图片宽高的时候 图片默认进行平铺
-当容器等于图片宽高的时候 图片默认进行占满
-当容器小于图片宽高的时候 图片默认显示一部分
注意：
-使用img标签导入图片 图片有自己的大小 图片默认显示一张 结构占位置
-使用背景图片导入 图片需要容器宽高支持 图片默认是进行平铺 css样式不占位置
- 背景平铺属性
属性：backgorund-repeat
属性值
- no-repeat 不平铺
- repeat 平铺
- repeat-x 横向铺满（水平）
- repeat-y 竖向铺满（垂直）
- 背景定位属性
属性：background-position
- x : left、right、center 水平
- y : top、bottom、center 垂直
- 背景固定属性
属性：background-attachmebt
属性值：scroll、fixed
- 简写方法
属性：background
属性值：颜色、图片、平铺、固定、定位
标签：元素,第三天,边框,padding,HTML,设置,margin,属性 来源： https://blog.csdn.net/weixin_58418115/article/details/121429887
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。