#前端与HTML｜ 青训营笔记

用户5399659033724
91 阅读4分钟

前端与HTML｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

（一）选择器

1. 元素选择器

语法：标签名{}，例：p{}

2. id选择器

语法：#id{}，例：#box{}

3. 类选择器

语法：.class{}，例：.div1{}

4. 通配选择器

语法：*{}

5. 复合选择器

image.png

5.1 交集选择器

作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器n{}
注意点：交集选择器当中如果有元素选择器，必须以元素选择器开头

5.2 交集选择器

作用：同时选择多个选择器
语法：选择器1，选择器2，选择器n{}

6. 关系选择器

6.1 子元素选择器

语法：父元素>子元素{}

6.2 兄弟选择器

6.2.1选择下一个兄弟
        语法： 兄元素（前）+弟元素{后}		
6.2.2选择下面全部兄弟： 
        语法：兄元素~弟元素

7. 属性选择器

 *[属性名]：选择含有指定属性的元素

 *[属性名=属性值]：选择含有指定属性和属性值的元素

 *[属性名^=属性值]：选择属性值以指定开头的元素

 *[属性名$=属性值]：选择属性值以指定结尾的元素

8. 子类选择器

 :first-child 第一个子元素

 :last-child 最后一个子元素

 :nth-child()
     -n 第几个
     -even/2n 选中偶数位的元素
     -odd/2n+1 选中奇数位的元素

:not() 满足条件的去除

9. 超链接伪类选择器：

 :link 用来表示没访问过的连接

 :visited 用来表示访问过的连接   由于隐私的原因只能修改链接颜色

 :hover 用来表示鼠标移入的状态

 :active 用来表示鼠标点击

10. 伪元素选择器

 ::first-letter 表示第一个字母

 ::first-line 表示第一行

 ::selection 表示选中的内容

 ::before 元素的开始
 ::after 元素的最后
         -before 和 after必须结合content属性来使用
         -无法被选择

11. 继承

（1）样式的继承，我们为元素设置的样式同时也会应用到他的后代元素上

（2）不是所有的样式都会被继承
              -比如 背景相关，布局相关的

12.权重

选择器的权重（按顺序从大到小）（累加时，不会超过最大选择器）（相同时，优先使用向下的）
（继承样式没有优先级）
   -!improtant 在样式后面添加可获取最高优先级
    -内联样式
    -id选择器
    -类和伪类选择器
    -通配选择器
    -继承样式
    --元素选择器
    -复合元素：并集选择器是权值相加，其余一样

（二）css是如何工作的

image.png

（三）颜色（rgb/rgba）

image.png

（四）盒子模型

1. 基础

content 内容
padding 内边距
margin 外边距
border 边框

四个值：上右下左
三个值：上 左右 下
俩个值: 上下 左右

2. 方向

2.1 水平方向：
	margin-left+boder-left+padding-left+width+padding-right+margin-right=父容器宽度
	备注:margin-right一般是系统设置
	
2.2垂直方向
	  -默认情况下父元素的高度被内容撑开
	  -子元素是在父元素的内容区排列，如果子元素的大小超过父元素，则会移除
	可选值：
		-visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
		-hidden 溢出内容将会裁剪不会显示
		-scorll 生成俩个滚动跳
		-auto 根据需要生成滚动条

3. 垂直方向的重叠

3.1 定义：

	相邻的垂直方向的外边距会发生重叠现象

3.2 兄弟元素（开发有利，不需要处理）

        -兄弟元素间的相邻垂直外边距会区俩只之间的较大值（俩者都是正值）

         -特殊情况：
	-如果相邻的外边距一正一负，则区域两者的和
                -如果相邻的外边距都是负值，则取俩者较大

3.3 父子元素（要处理）

         -父子元素相邻的外边距，子元素会传递父元素（就是一起动）
	-BFC（解决方法：把父元素设置为BFC）
	-.clearify::after{
		content：'';
		Display:table;
                    clear:both;
               }

4. 行内元素的盒模型

（1）行内元素不支持设置高度和宽度
（2） 行内元素设置padding，border，magin可以设置，但是不改变布局（覆盖）

5. display和visibility

display
         -inline 行内元素
         -block 块元素
         -inlin-block 行内块元素：可以设置宽高且不会独占一行
         -table 将元素设置为一个表格
         -none 元素不在页面中显示

visibility 可以用来显示状态
         -visible 默认值：在页面中正常显示
         -hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置

6. box-sizing

	6.1 定义：
		box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
		
	6.2 属性：
		 conten-box 默认值，宽高用来设置内容区大小
		
		 border-box 宽高用来设置盒子可见框的大小

7. 轮廓阴影和圆角

7.1 阴影（box-shadow: x,y,模糊半径,color）

      -x:水平偏移量
      -y：水平偏移量
      -模糊：虚实
      -color：最好使用rgba

7.2圆角

	border-radius：x（用来设置圆角）
	
	border-radius：x/y（用来设置圆角）
	      -四个值：左上 右上 右下 左下
	      -三个值：左上 右上/左下 右下
	      -俩个值：左上/右下 右上/左下
	
	border-top/bottom-left/right-radius：各个方向
avatar
文章
阅读
粉丝