前端基础知识记录

strong: 加粗

em: 倾斜

ins: 下划线

del: 删除线

ul -> li : 无序列表

ol -> li : 有序列表

table : 表格标签

//表头默认居中显示
        //合并列单元格
            //合并行单元格
            
        

        
优秀学生信息表格

            
年级
            
姓名
            
学号
            
班级
        
        

            
高三
迪丽热巴
            
110
            
三年二班
        
        

            
古力娜扎
            
120
            
三年三班
        
        

            
评语
            
你们很优秀
    

dl -> dt -> dd : 自定义列表

input : 文本框

select : 整体下拉菜单

option : 每一项下拉菜单

textarea : 文本域标签

lable : 绑定文本和表单标签的关系

 性别: 
     男
     女

空格 :  

a : 超链接标签

css引入方式

css选择器

font相关属性

background相关属性

块级元素 : display:block 代表标签有div,p,h系列标签

特点 :

1.独占一行宽度

2.默认占满一行，高度默认由内容撑开

3.可以设置宽高！！

行内元素 : display:inline 代表标签有a,span标签

特点 :

1.一行可以显示多个

2.宽度和高度默认都是由内容撑开

3.不可以设置宽高！！！

行内块元素 : display:inline-block 代表标签有input标签

特点 :

1.一行可以显示多个

2.可以设置宽高

居中方式：

1.水平居中 :

text-align:center

magin: 0 auto

2.垂直居中 :

line-height : 标签的高度

浏览器默认字体大小16px 最小字体为 : 12px

盒子模块的四大组成部分

1. 内容 : content

2. 内边距 : padding

3. 边框 : border

4. 外边距 : margin

CSS3盒模型的代码 : box-sizing : border-box //自动内减

外边距折叠现象-塌陷现象的解决方法 :

1. 给父元素设置border-top或者padding-top

2. 给父元素设置overflow:hidden

3. 转换成行内块元素

4. 设置浮动

匹配父元素中的第一个子元素E : E:first-child{}

匹配父元素中的最后一个子元素E : E:last-child{}

匹配父元素中的第n个子元素E : E:nth-child(n){}

清除浮动的方法：

1. 直接设置父元素的高度

2. 额外标签法

   • 在父元素的最后添加一个块级元素

   • 需要给添加的块级元素设置清除浮动的核心代码：clear：both

3. 单伪元素清除法

   .clearfix::before,
   .clearfix::after{
       content: "";
       display: table;
   }
   
   .clearfix::after{
       clear: both;
   }
   

4. 双伪元素清除法

5. 给父元素设置一个overflow：hidden

解决盒子与盒子之间的层叠问题 : 子绝父相

让盒子固定在页面中的某个位置 : 固定定位

水平居中

1. 子绝父相
2. 给子元素设置 :

left: 50%
transform: translateX(-50%)

水平居中

1. 子绝父相

2. 给子元素设置 :

left: 50%
top: 50%
transform: translate(-50%, -50%)

z-index : 设置定位元素的层级 取值数字越大层级越高

垂直对齐方式 : vertical-align

光标类型 : cursor

边框圆角 : border-radius

overflow : 设置内容的超出部分的显示效果

元素本身隐藏属性

1. visibility：hidden 当前元素隐藏，占位置

2. display：none 当前元素隐藏，不占位置

透明度 : opacity

边框合并 : border-collapse：collapse //给table标签设置

链接伪类选择器

焦点伪类选择器 : E:focus

属性选择器

1. E[attr] {}

2. E[attr=‘xxx’] {}

文字阴影 : text-shadow: offset-x offset-y blur color;

1. offset-x：必填参数，设置阴影的水平偏移量，可以为负值；

2. offset-y：必填参数，设置阴影的垂直偏移量，可以为负值；

3. blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；

4. color：可选参数，设置阴影的颜色，如果省略或未指定该值，则采用 color 属性的值。

    


    
文本阴影效果
    
文本阴影效果

盒子阴影 : box-shadow: h-shadow v-shadow blur spread color inset;

1. h-shadow：必填参数，设置阴影水平方向的偏移量，可以为负值；

2. v-shadow：必填参数，设置阴影垂直方向的偏移量，可以为负值；

3. blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；

4. spread：可选参数，设置阴影的尺寸；

5. color：可选参数，设置阴影的颜色；

6. inset：可选参数，将默认的外部阴影 (outset) 改为内部阴影。