前端学习日志3

最新推荐文章于 2024-08-03 20:32:29 发布

sakana丶

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量79

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/gugugogo1/article/details/127692893

版权

1标签选择器（TAG选择器）
css : div{}
html : < div>

使用场景：
去掉某些标签的默认样式时
复杂的选择器中，如层次选择器

2群组选择器（分组选择器）
写法css :
div , p , span{}
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。

3通配选择器
*{ }
会给所有的标签添加样式，慎用。
去掉所有标签的默认样式

4层次选择器
后代： M N { }当前M后面的所有N标签
父子：M > N{ }当前M标签下面的一层N标签
兄弟：M ~ N{ } 当前M下面的所有兄弟N标签
相邻：M + N { } 当前M下面的相邻的N标签

<style>
/* #list li{border: 1px red solid;} */
        /* #list > li{border: 1px red solid;} */

        /* div~h2{background: red;} */
        /* div+h2{background: red;} */
</style>
<body>
<ul id="list">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol> -->

    <!-- <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
</body>

5.属性选择器
M[attr] { }
=：完全匹配
*= ：不完全匹配
^= : 起始匹配
$= : 结束匹配
[ ] [ ] [ ]:组合匹配

6.伪类选择器
CSS伪类选择器用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。

M：伪类{ }
:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式（可以添加给所有的标签）
注：一般的网站都只设置 a{ } ( link visited active ) a: hover{ }
:after 、:before 通过伪类的方式给文本添加一个内容，使用content属性
:checked、:disabled、:focus 都是针对表单元素的
结构性伪类选择器
nth-of-type ( )、nth-child ( )
角标是从1开始的，1表示第一项，2表示第二项
frist-of-type
last-of-type
only-of-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:first-of-type{background-color: blue;}
        li:nth-of-type(2n+3){background-color:greenyellow;}
         li:nth-of-type(2n){background-color: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

nth-of-type ( )和nth-child ( )之间的区别：
type:类型
child:孩子
二.CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性 inherit值）

 <style>
        div{ width: 60px;height: 60px; border: 2px red solid;} 
        p{border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

三.CSS优先级
1.相同样式优先级
当设置相同样式时，后面的优先级较高。

2.内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

3.单一样式优先级
style行间 > id > class > tag > * > 继承

style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

4.import群组
提升样式优先级，非规范模式，不建议使用（不能针对继承的属性进行优先级的提升）

5.标签+类与单类
标签+类 > 单类

6.群组优先级
群组选择器与单一选择器优先级相同，靠后写的优先级高。

7.层次优先级
1.权重比较
ul li .box p input { } 1+1+10+1+1
.hello span #elem{ } 10+1+100
2.约分比较
ul li .box p input { } 约分后 li p input{ }
.hello span #elem{ } 约分后 #elem{ }

五.CSS盒子模型
content、padding、margin
-组成：content --> padding --> border --> margin
(物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距)

1content
content : 内容区域由width和height组成的

2 padding
padding: 内边距（内填充）

number : 30px
只写一个值：30px (上下左右）
写两个值 : 30px 40px (上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）

单一样式只能写一个值：
padding-top:上填充
padding-left：左填充
padding-right：右填充
padding-bottom：下填充

3 margin
margin : 外边距（外填充）

只写一个值：30px (上下左右）
写两个值 : 30px 40px (上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）

单一样式只能写一个值：
margin-top:上填充
margin-left：左填充
margin-right：右填充
margin-bottom：下填充

注：
1.背景颜色会填充到margin以内的区域
2.文字会在content区域
3.padding不能出现负值，margin是可以出现负值的。

六.标签分类
按类型
block(块）: div 、ui 、li 、p、 h1 …
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同。
4.所占区域是一个矩形

inline（内联）: span 、a 、em 、strong、 img…
1.挨在一起的
2.有些样式不支持，例如：width 、height、 margin、 padding…
3.不写宽的时候，宽度由内容决定
4.所占区域不一定是矩形
3.内联标签之间有空隙，原因：换行产生的

inline-block(内联块) : input 、 select…
1.挨在一起，但支持宽高

注：布局一般用块标签，修饰文本一般用内联标签。

按内容
flow:流内容
interactive:互动的
heading:标题
sectioning:分区
embedded :嵌入的
phrasing:措辞

按显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input…
非替换元素：将内容直接告诉浏览器，将其显示出来。
div、 h1、p…
6.显示框类型
dispiay: block、 inline、 inline-block、 none
区别：
display : none 是不占空间的隐藏
visibility : hidden 占空间的隐藏

七.标签嵌套规范
组合规范
ul li
dl dt dd
table tr td

块标签可以嵌套内联标签
< div>
< span> < /span>
< /div>

块标签不一定能嵌套块标签
居然大多数可以嵌套但< p> < /p>不能嵌套div

内联标签不能嵌套块标签
特殊：
< a herf=“#”>
< div> < /div>
< /a>
这个是可以的

八.overflow溢出隐藏
visible：默认
hidden：截取
scroll：x、y轴滚动条
auto：自动感知内容多就会出现滚动条
x轴、y轴：overflow-x、overflow-y针对两个轴分别设置

九.透明度与手势
1 透明度opacity
opacity : 0 (透明）~~ 1（不透明）
0.5（半透明）
注：占空间、所有的子内容也会透明
rgba() : 0~~1 可以让指定的样式透明，而不影响其他样式

2 手势 cursor
cursor：手势
default:默认鼠标的样式
要实现自定义手势，需要准备图片： .cur、.ico 格式
cursor : url(./img/cursor.ico),auto;

十.最大、最小宽高
min-width、min-height
max-width、max-height
百分比单位：换算→以父容器的大小进行换算的
一个容器这么适应屏幕的高：容器加height:100% ; body:100% ;

十一.CSS默认样式
有些标签有默认样式，有些没有默认样式

没有默认样式：div、span…

有默认样式：
body→margin：8px
h1→margin：上下 21.440px
font-weight : bold
p→margin：上下 16px
ul→margin：上下 16px padding：左 40px
默认点：list-style : disc
a→text-decoration：underline

CSS reset:
*{ margin : 0; padding : 0; }
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微影响性能

ul{ list-style : none; }
a{ text-decoration : none ; color : #999 ; }
img{ display : block ; }
问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align:baseline; 基线的对齐方式，默认值
img{ vertical-align : bottom; }解决方式是推荐的

写具体页面的时候和一个布局效果的时候：
1.写结构
2.CSS重置样式
3.写具体样式

float浮动
脱离文档流，沿着父容器靠左或靠右进行排列。
left、right、none

float注意点只会影响后面的元素。内容默认提升半层。默认宽根据内容决定。换行排列（放不下的时候换行排列）
主要给块元素添加，但也可以给内联元素添加。

如何清除浮动
上下排列：
clear属性，表示清除浮动的，left、right、left

嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。