前端基础4：CSS文本样式和盒子模型问题

最新推荐文章于 2022-03-31 11:20:04 发布

weixin_33889245

最新推荐文章于 2022-03-31 11:20:04 发布

阅读量224

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5b8537d551882542f32797f5

版权

CSS文本样式属性

table tr:nth-child(even)table各行选择偶数行
table tr:nth-child(odd) table隔行选择奇数行
text-indent:2em 首行缩进
单位用em 1em等于一个字符
color设置字体颜色
- 英文字母命名：eg：red，black
- 十六进制命名：#ff0000：红色 #f00 缩写
- 红绿蓝（RGB）
- eg：rgb(255,0,0)

R	G	B
00-ff	00-ff	00-ff

-letter-spcing；字符间距 - 单位：px，em

line height设置文本行高
text-align文本对齐方式
- 常用值：
  - 左对齐：left
  - 居中：center
text-decoration 向文本添加修饰
- 常用值：
  - none取消
  - overline线在文本上
  - line-through 线在文本中
  - underline 线在文本下 -text-transform 控制元素中的字母
- 常用值： -uppercase 大写
  - capitalize小写
  - lowercase 首字母大写
word-spacing 设置字间距

CSS字体

font-size 字体大小
- 单位：px，em，rem
font-family 指定使用什么字体

font-family: "微软雅黑";
复制代码

font-weight 字体粗细

关键字法：属性值为关键字
font-weight：bold； /*粗体*/
font-weight：lighter； /*细体*/
font-weight：normal； /*默认粗细*/ 用在strong或d身上

阿拉伯数字法：
font-weight：400；/*等价于normal*/
font-weight：700； /*等价于bold*/
复制代码

font-style设置字体样式

font-style: italic; /*斜体*/
font-style: normal; /*正常*/ 常用在em或i身上
复制代码

CSS盒子模型

HTML所有元素都具备盒模型的特性，可以把所有的标签都看成一个盒子

盒子的组成
- border 盒子壁
- padding 内边距
  - 内容与盒子间的间隙
- content 内容区
  - width/heigh 宽高
盒子模型 -在盒子的基础上多了一个 margin 外边距

-盒子模型之border

border: 10px solid #ff0；/*复合属性*/
 border-style: solid; /*边框样式*/
			   dashed /*虚线*/
			   dotted /*实心圆*/
 border-width: 20px;  /*边框大小*/
 border-color: yellow; /*边框颜色*/


顺序问题：
 border-width: 2px 3px 4px 5px; /*上右下左 顺时针*/
 border-width: 2px 5px 7px; /*上 左右 下*/
 border-width: 10px 20px; /*上下 左右*/
复制代码

盒子模型之padding

顺序问题
padding: 10px 20px 30px 40px; /*上 右 下 左*/
padding: 10px 20px 30px; /*上 左右 下*/
padding: 10px 20px; /*上下 左右*/
padding: 10px; /*全部*/
复制代码

content
- 对盒子内容的设置
- width：100px； 盒子内容的宽
- height：100px；盒子内容的高
盒模型之margin

顺序问题
margin: 10px;  /*全部*/
margin: 10px 20px 30px 40px; /*上 右 下 左*/
margin: 10px 20px 30px; /*上 左右 下*/
margin: 10px 20px;  /*上下 左右*/
复制代码

margin兼容性问题

margin 双边距问题
当两个相邻元素上下排布时，给第一个值设置margin-bottom，给第二个值设置margin-top两个元素之间的距离取margin最大值，而不是两个margin值相加之和。
margin塌陷问题
- 两个元素是包含关系时，给子元素设置margintop值时，会出现值传递问题（把值传递给父元素了）
  - 1.解决办法：给父级元素加：border；
  - 2.给父级元素设置overflow：hidden；
  - 3.给父级元素设置padding-top，此时只需要将内容高度减去padding-top

盒子的计算公式（盒模型的计算公式）

盒子的宽：content+padding-left+padding-right+border-left+border-right 无margin
盒子的高：content+padding-top+padding-bottom+border-bottom+border-bottom 无margin

overflow属性规定内容溢出文本框问题

overflow:hidden; 溢出隐藏(内容超出隐藏) 常用
overflow:auto; 浏览器会判断我们的内容是否超出我们的区域，如果超出来就显示滚动条，如果没超出就不会出现滚动条
overflow:scroll; 不管我们的内容是否超出我们的规定的区域，都会出现滚动条 不常用overflow:hidden; 溢出隐藏(内容超出隐藏) overflow:auto; 浏览器会判断我们的内容是否超出我们的区域，如果超出来就显示滚动条，如果没超出就不会出现滚动条 overflow:scroll; 不管我们的内容是否超出我们的规定的区域，都会出现滚动条 overflow:visible; 默认值，如果内容超出则内容会显示在区域外
overflow:visible; 默认值，如果内容超出则内容会显示在区域外

转载于:https://juejin.im/post/5b8537d551882542f32797f5