2023.1.3日复习打卡

这几天的作业写的有点吃力，缺少复习，所以今天打算把前面学的复习一下

字体文本相关样式：大小：font-size

粗细：font-weight----1.normal(400) 2.bold(700)

倾斜：font-style------1.normal 2.bold

字体：font-family

字体相关样式连写：SWSF（style weight size family)

文本样式：1.文本缩进：text-indent-----取值：数字+px；数字+em

即首行缩进：设置为font-size的两倍

2.水平对齐：text-agin-------取值：left center(给文本对齐时用，给大盒子居中时用margin:0 auto) right

3.文本修饰：text-decoration------取值：none underline line-through over-line

4.行高：line-height(可以用此设置行与行之间的间隙）SW(S/L )F，此处L代表行高，未写代表默认

emmet语法简写：1. .red+tab--------<div class=“red"></div>

2.#one+tab--------<div id="one"></div>

3.p.red#one------------将上面两个结合起来

4.ul>li-------<ul>

<li></li>

</ul>

5.ul>li*3--------同上，同时li变为了三行

hover选择器（鼠标悬停的状态):

例如：a:hover {

color:red

}

背景相关内容：

1. 背景颜色：bgr+回车

2. 背景图片：background-image:url('图片的路径')

3. 背景平铺：background-repeat

repeat:水平垂直均平铺

no-repeat:不平铺

repeat-x:沿x方向平铺

repeat-y：沿着y方向平铺

4. 图片位置：background-position（bgp)

取值：（1）方向n （水平：left right center ）（垂直：top center bottom)----两两结合 例如：（center，center）

（2）数字+px 写为坐标

5. 背景的连写：推荐:color imge repeat position

元素特点

1. 块级元素：display：block-----独占一行、默认父元素宽度、可设宽高

2. 行内元素：display：inline------一行显示多个、宽度和高度由内容撑开，不可设宽高

3. 行内块级元素：display：inline-block--------一行显示多个、可设置宽高

嵌套规范

1. p标签中不能嵌套div,p,h等块级元素

2. a中不可嵌套a

继承失效

1，a的颜色

3. h的字大小

4. div高度不可继承但宽度类似于继承

pxcook使用

快捷键：放大：ctrl++

缩小：ctrl+-

移动：空格按住不放，鼠标拖拽

盒子模型

1.组成：content padding(内边距） border（边框） margin（外边距）

2.边框：粗细：border-width

样式：border-style

颜色：border-color

3.padding:上 右 下 左

4.自动减盒子撑大问题：box-sizing:border-box

取消默认margin,padding:对body设置即---body{

line-height=1

}

项目中去掉默认：*{

margin=0

padding=0

}