3.8日学习日志 css常用样式

css常用样式

一、字体

粗细font-weight：

属性值：lighter normal bold bolder四种属性值依次加粗，或者数字表示（注意400和700两个值），没有单位。

字体风格font-style：

设置是否斜体

属性值：normal，italic（斜体英文），oblique（倾斜文字，只是将文字倾斜，与字体无关 ）

字体综合属性font：

字体，字号，行高，加粗，斜体都是font综合属性的单一属性

这些单一属性可以进行合写，属性可以有两到多个，值之间用空格进行分隔。

写法一：

先写字号，再写字体，否则不能正确显示

 <style>
       div{
        font: 59px  "Simsun";
    }
    </style>

写法二：

书写顺序必须是字号，行高，字体，字号和行高之间必须用/进行分隔。

二、文本

水平对齐text-align

属性值：left center right

线条text-decoration

none没有修饰

overline上划线

line-throug删除线，中划线，标签的默认值

underline 下划线 标签的默认值

文本缩进text-indent

作用：设置段落首行是否进行缩进

属性值：px数值 缩进距离是长度单位，不常用

​ em 首行缩进几个中文字符的位置（比较常用，可以根据字号来缩进，实用）

text-indent: 2em;

​ 根据width百分比来定义（不常用）

text-indent: 50%;

三、盒模型（框模型）

包含了五个用来描述盒子位置、尺寸的属性，分别是宽度width，高度height，内边距padding，边框border，外边距margin

宽度width：

属性值：

• auto 默认值
• px 像素值定义的宽度
• % 定义参考父元素width的百分比宽度

高度height：

基本同width

内边距padding：

作用：设置元素的边框内部到宽高区域之间的距离

特点：可以加载背景

属性值：常用px

padding是一个复合属性，可以分为四个方向的单一属性，而且可以单独设置。

p{

padding-top：10px；

padding-right:20px;

pading-bottom:30px;

padding-left:40px;

}

四值法：

padding：10px 20px 30px 40px;

这四个值设置的分别是：上，右，下，左

三值法：

三个值分别分配给：上，左右，下

二值法

上下，左右

边框border：

盒子实体化的最外层 .

由三个值组成：线的宽度，线的形状，线的颜色。中间用空格进行分隔

border :10px solide  red

按照属性值的类型进行划分

• border-width:属性值一般是px
• border-style：属性值可以有none，solid，dashed（虚线），double（双线）/。。。
• border-color

外边距margin：

设置的是盒子和盒子间的距离，不能渲染背景

属性值：px

四、盒模型常见应用

• 清除默认样式
• height应用
• 居中
• 父子盒模型
• margin塌陷现象

清除默认样式

目的是为了清除浏览器加载的默认样式对整体布局效果造成的影响。比如说大部分容器及标签都有默认边距，要么用并集选择器，要么用通配符进行清除。

 body,div,h1,p{

​      margin:0;

​      padding:0;

​    }

简单的小案例可以用通配符*达到一个全选的目的，但是在大项目中不推荐，因为效率问题。

清除a标签的默认央视，在设置页面中常用a的公共样式，设置color和text-decoration。

a{

color:black

text-decoration：none

}

盒子高度height

• 高度属性可以设置，也可以不设置，
• 如果设置了高度盒子的位置就定死了，
• 如果不设置会根据标签内部高度自动撑开。

此时有一个css的overflow属性，

该属性决定了内部元素加载高度超过父级，是否会出现溢出效果

属性值：

visible溢出的部分可视化

hidden溢出的部分直接隐藏（overflow：hidden；）

scroll溢出部分出现滚动条

盒子居中：

首先复习文本居中text-align

多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同

元素水平居中：将margin水平方向的值都设置为auto。

原因 Auto只在水平方向有作用水平方向的margin，如果设置为auto边距和自动无限增大，直到撑满整个负元素，除了子元素宽度之外的剩余区域，如果两个水平方向都是OPPO两边，只要无限大就能达到一个平衡，两边距离相同导致盒子居中。

.box{

width:30px;

height:300px;

margin:auto;

}

父子盒模型：

一个父元素内部可以放一个或多个子元素，而多个子元素要排成一行显示，必须保证父元素宽度足够，需要遵循设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度width。

父元素的width>=所有子元素的width=padding+border+ width+margin，如果不满足要求的话多余子元素会掉出一排。或者是溢出父元素。

注意计算和量取尺寸时一定要精准计算一点像素都不能偏差。

注意特殊情况：盒模型自动内减

margin塌陷现象：

在垂直方向两个元素的外边距相遇，浏览器中加载的真正外边距不是两个间距的加和，而是两个边距中值较大的，边距小的容易塌陷到边距值大的内部

解决margin塌陷问题的方法：

同级元素： 如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

父子元素：让两个边距不要相遇，中间可以用复元素border，或者paddy将边距分隔开。更常用的方法是父子和模型之间的距离，就不要用儿子的magin去踹出来，而是用父亲的padding挤出来。

水平方向的margin没有塌陷现象