Web前端（二）

た入场券 2022-02-17 13:36 222阅读 0赞

### CSS ###

*  CSS:Cascading层叠 Style样式 sheet表,css用于美化页面，html相当于盖房子，css相当于装修

#### CSS的引入方式 ####

*  三种引入方式：
 *  内联样式： 把样式代码写在标签的style属性里面，缺点：不能复用
    
        <div style="color: red">今天是星期一，好困哦！</div>
 *  内部样式： 在页面的head标签内部添加style子标签，在style标签内部写样式代码，缺点：只能当前页面复用，不能多页面复用
 *  外部样式： 在单独的css文件中写样式代码，在页面中通过link标签把样式文件引入当前页面

#### 三种引入方式的优先级 ####

1.  内联优先级最高
2.  内部和外部优先级相同，后执行的覆盖先执行的

### CSS选择器 ###

1.  标签名选择器
2.  格式:  
    标签名\{ 样式名称1:值; 样式名称2:值; \}
3.  id选择器
4.  格式： \#id\{ 样式名称1:值; 样式名称2:值; \}
5.  通过id选择器选择页面中的某一个元素
6.  类选择器
7.  格式： .class\{ 样式名称1:值; 样式名称2:值; \}
8.  分组选择器
9.  分组选择器可以将多个选择器合并成一个选择器
10. 格式： div,\#abc,.c1\{ 样式名称1:值; 样式名称2:值; \}
11. 属性选择器
12. 格式： 标签名\[属性名=‘值’\]\{ 样式名称1:值; 样式名称2:值; \}
13. 子孙后代选择器
14. 格式： div p span\{ 样式名称1:值; 样式名称2:值; \}
15. 子元素选择器
16. 格式： div>p>span\{ 样式名称1:值; 样式名称2:值; \}
17. 伪类选择器
18. 用于选择元素的状态
19. 状态有：未访问状态、访问过状态、悬停状态、点击状态
20. a:visited\{\} a:link\{\} a:hover\{\} a:active\{\}
21. 任意元素选择器
22. 格式 \*\{\} 选择所有元素

### 常见样式 ###

#### 颜色的赋值方式 ####

*  三原色 红绿蓝 red green blue rgb
 *  颜色单词赋值
 *  6位的16进制 \#0000ff
 *  3位的16进制 \#f00
 *  3位的10进制 rgb(0-255,0-255,0-255)
 *  4位的10进制 rgba(0-255,0-255,0-255,0-1) 0-1值越小越透明 alpha

#### 背景图片 ####

设置背景图片
        background-image: url("../imgs/1.jpg");
        设置图片尺寸
        background-size: 100px 100px;
        background-repeat: no-repeat;/* 禁止重复 */ 
        设置显示位置
        /* background-position: left bottom; *//* left right top bottom center */
        background-position: 90% 90%;

#### 布局相关（盒子模型） ####

*  盒子模型由以下几种组成 元素宽高、元素外边距、元素内边距、元素的边框

##### 元素宽高 #####

*  通过width、height给元素宽高赋值
 *  通过像素和上级百分比赋值
 *  块级元素可以修改宽高， 行内元素不能修改宽高，只能由内容决定

##### 元素的外边距 #####

*  设么是外边距：元素距上级元素或相邻兄弟元素的距离，称为外边距
 *  注意事项：
    
    1.  块级元素可以给元素添加四个方向的外边距，行内元素只能添加左右外边距，上下外边距没效果
    2.  行内元素左右外边距相加 ，块级元素上下相邻取最大值
    3.  当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现显示异常，通过给上级元素添加overflow:hidden解决此问题
 *  赋值方式： margin-top/left/right/bottom margin:10px; //四个方向全部是10px margin:20px 50px; 上下20px 左右50px margin:0 auto; 重要 水平居中 margin:10px 20px 30px 40px; //上 右 下 左 顺时针

##### 元素边框 #####

*  赋值方式： border:1px solid red border-left/right/top/bottom
 *  注意事项：
 *  块级元素边框全部生效，并且会影响元素所占的宽高，行内元素边框全部生效 但是只影响元素所占宽度 不影响元素所占高度
 *  盒子模型精简版： 宽高 行内元素不能修改宽高，由内容决定 外边距 行内元素不能添加上下外边距 左右相加 上下取最大值 显示异常 overflow:hidden 边框 行内元素边框不影响元素所占高度

### 盒子模型之内边距 ###

*  什么是内边距：元素边框距内容的距离称为内边距
 *  赋值方式：和外边距赋值方式类似 padding:10px; padding:10px 20px; 上下 左右 padding:10px 20px 30px 40px; 上右下左
 *  注意事项：行内元素上下内边距有效果但是不影响元素所占的高度
 *  如果需要移动元素的文本内容只能通过元素的内边距移动
 *  如果需要移动的是元素的子元素有两种移动方式，1. 给元素添加内边距，切记此种方式会影响元素的宽高 2. 给子元素添加外边距(推荐)

#### 行内元素特殊点 ####

1.  不能修改宽高
2.  不能添加上下外边距
3.  边框不影响所占高度
4.  内边距不影响所占高度

### 文本相关 ###

1.  水平对齐方式 text-align:left right center
2.  文本修饰 text-decoration: overline/underline/line-through/none
3.  文本阴影 text-shadow:颜色 x偏移 y偏移 浓度
4.  文本颜色 color:red;
5.  行高 line-height: 可以控制文本垂直居中

### 字体相关 ###

1.  字体大小 font-size
2.  字体加粗 font-weight:bold/normal
3.  斜体 font-style:italic
4.  字体设置 font-family:xxx,xxx,xxx;

#### 溢出设置 overflow ####

*  hidden：超出隐藏
 *  visible：超出显示（默认）
 *  scroll：超出滚动显示

#### 显示方式 display ####

*  block：块级元素的默认值 ，可以修改宽高，只能独占一行
 *  inline：行内元素的默认值，可以共占一行，不能修改宽高
 *  inline-block:行内块，既可以修改宽高，也可以共占一行

#### 定位方式 ####

##### position定位 #####

*  有四种定位方式
 *  静态定位static（文档流）
 *  默认的定位方式
 *  行内元素从左向右，块级元素从上到下
 *  相对定位relative
 *  元素不脱离文档流从元素所在位置做位置偏移（通过top、left、right、bottom控制元素的位置）
 *  绝对定位absolute
 *  元素脱离文档流 元素相对于窗口（默认）或某一个上级元素(需要给上级元素添加postion：relative)做位置偏移
 *  固定定位fixed
 *  脱离文档流 元素相对于窗口做位置偏移

#### 浮动定位 float ####

*  浮动定位脱离文档流，元素从当前所在行向左或向右浮动，直到撞到上级元素边框或其它浮动元素停止
 *  当纵向排列的元素需要改成横向排列时使用浮动定位
 *  如果一行装不下会自动换行，换行时有可能被卡住。
 *  如果元素的高度为自动识别高度，元素内部的所有子元素全部浮动后，自动识别的高度为0，可以通过给元素添加overflow：hidden 解决此问题
 *  如果元素上面的其它元素浮动，则元素会自动往上顶，如果不希望元素顶上去给元素添加clear属性

### CSS的三大特性 ###

1.  继承性： 子元素可以继承上级元素的部门样式，只能继承文本相关和字体相关的样式
2.  部分元素不受继承影响，比如超链接a不受继承影响、h1-h6字体大小不受继承影响
3.  层叠性： 当不同的选择器选择到同一个元素，如果作用的样式不同则全部层叠到一起响应，如果作用的样式相同则由优先级决定
4.  优先级：作用范围越小优先级越高，直接选中优先级高于间接选中(继承属于间接选中) id>class>标签名

### 行内元素的垂直对齐方式 vertical-align ###

*  top 上对齐
 *  bottom 下对齐
 *  middle 中间对齐
 *  baseline 基线对齐 默认