Web之一只jio碰到门了

CSS选择器
- 标签选择器（又叫TAG选择器）
- 群组选择器（又叫分组选择器）
- 通配选择器
- 层次选择器
- 属性选择器
- 伪类选择器
CSS样式继承
CSS优先级
CSS盒子模型
- 盒子模型问题
标签分类
- 按类型：
- 按内容
- 按显示
显示框类型
标签嵌套规范
溢出隐藏
透明度与手势
最大、最小宽高
CSS默认样式
CSS reset
float浮动
- 文档流
- float特性
- floa取值
- float注意点
- 清除浮动

CSS选择器

标签选择器（又叫TAG选择器）

css：div{}
html：< div >
使用的场景：
1、去掉默写标签的默认样式是
2复杂的选择器中，如层次选择器

群组选择器（又叫分组选择器）

css：div，p，span{}
可以通过逗号的形式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用

<!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>  div,#text,title{background: red;}</style>
</head>
<body>
<div>这是一个块</div><p id="text">这是一个段落</p><h2 class="title">这是一个标题</h2>
</body>
</html>

通配选择器

*{} -> div。ul，li，p，h1，h2······{}

  注：尽量避免使用通配选择器，慎用

使用场景：
1、去掉所有标签的默认样式时

层次选择器

后代：M N
父子：M>N
兄弟：M~N（当前M下面的兄弟N标签）
相邻：M+N（当前M下面相邻的N标签）

属性选择器

=：完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配
[][][]可以进行组合

<!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>/*div[class]{background: aqua;}*//*div[class=box]{background: aqua;}*//*div[class*=search]{background: aqua;}*//* div[class$=search]{background: aqua;}*/div[class][id]{background: aqua;}</style>
</head>
<body><div>aaaaaa</div><div class="box" id="elem">bbbbbb</div><div class="search">cccccc</div><div class="search button">dddddd</div><div class="button search">eeeeee</div></body>
</html>

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
M:伪类
:link ：访问前的样式（只能添加给a标签）
:visited ：访问后的样式（只能添加给a标签）
:hover ：鼠标移入时的样式（可以添加给所有标签）
:active ：鼠标按下时的样式（可以添加给所有标签）

注：一般网站都只设置a{L V H A 顺序}

<br /> Document<br /> 这是一个链接

:after：通过伪类的方式给元素往后添加一段文本内容，使用content
:before：通过伪类的方式给元素向前添加一段文本内容，使用content
:checked：针对表单元素
:disabled：针对表单元素
:focus：针对表单元素

div:after{content:"world";color: red;} :checked{width: 100px;height: 100px;} :focus{background: aquamarine;}

hello

<!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:nth-of-type(2n-1){background: aquamarine;}li:first-of-type{background: aqua;}li:last-of-type{background: aquamarine;}li:only-of-type{background: blueviolet;}li:nth-of-type(2){background: brown;}div:nth-child(2){background: brown;}*/div:only-of-type{background: blue;}</style>
</head>
<body><ul><li></li><div>aaaaaa</div><li></li><li></li><li></li><li></li></ul>
</body>
</html>

CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认不能继承，但能设置继承属性inherit值）

![<!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>div{width: 300px;height: 300px;border: 1px rgb(234, 67, 67) solid;color: aqua;font-size: 30px;}p{border: inherit;}</style>
</head>
<body><div><p>这是一个段落</p></div>
</body>
</html>](https://img-blog.csdnimg.cn/686d9f5da0f84697ab91d26fe8ea6ed4.png)

CSS优先级

1、相同样式优先级：当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
2、内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
3、单一样式优先级：style行间 > id > class > tag > * > 继承
注：style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1
4、！important：提升样式优先级，非规范方式，不建议使用

不能针对继承的属性进行优先级的提升

5、标签+类与单类：标签+类 > 单类
6、群组优先级：群组选择器与单一选择器的优先级相同，靠后写的优先级高

<!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>div{color: chocolate;}div{color: blue;}</style><link rel="stylesheet" href="./base.css">---><style>/*#elem{color: darksalmon;}.box{color: aqua;}div{color: bisque;}*{color: indianred;}body{color: mediumslateblue;}#elem{color: aquamarine ;}*{color: indianred ;}body{color: mediumslateblue !important;}.box{color: brown;}div.box{color: aquamarine;}*/div,p{color: bisque;}div{color: blue;}</style>
</head>
<body><!---<div id="elem" style="color:blue ;">这是一个块</div><div id="elem" class="box;">这是一个块</div><div id="elem" style="color:blue ;">这是一个块</div>---><div class="box;">这是一个块</div><p>这是一个段落</p>
</body>
</html>

7、层次优先级
（1）权重比较：
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100

 100个tag相加小于一个class

（2）约分比较
ul li .box p input{} => li p input{}
.hello span #elem{} => #elem{}

CSS盒子模型

组成：content -> padding -> border -> margin
物品填充物包装盒盒子与盒子之间的间距
content：内容区域宽高组成
padding：内边距（内填充）数值可四边单独设置
margin：外边距（外填充）

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

<!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>#box{width: 300px;height: 300px;background: red;border: 1px solid red;padding: 30px 50px;margin: 10px;}#box2{width: 300px;height: 300px;background: blue;color: white;}</style>
</head>
<body><div id="box">这是一个盒子</div><div id="box2">这又是一个盒子</div>
</body>
</html>

box-sizing：属于允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）/border-box。

默认值：width，height -> content
border-box：width，height -> content padding border

使用场景：
1、不用再去计算一些值
2、解决一些百分比的问题

<!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>#box{width: 300px;height: 300px;background: red;border: 1px solid red;padding: 30px 50px;box-sizing: content-box;}input{width: 100%; padding: 30px;box-sizing: border-box;}</style>
</head>
<body><div id="box">这是一个盒子</div>
</body>
</html>

盒子模型问题

1、margin叠加：出现在上下margin同时存在的时候，会取上下中值较大的
解决方案：

1、BFC规范
2、想办法只给一个元素添加间距

2、margin转递：出现在嵌套结构中，只是针对margin
解决方案：

1、BFC规范
2、给父容器加边框
3、margin换成padding

<!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>/*#box1{width: 200px;height: 200px;background: cyan;margin-bottom: 30px;}#box1{width: 200px;height: 200px;background: wheat);margin-top: 30px;}#box1{width: 200px;height: 200px;background: red;border: 1px black solid;}#box2{width: 100px;height: 100px;background: gold;margin-top: 100px;}*/#box1{width: 200px;height: 100px;background: red;padding-top: 100px;}#box2{width: 100px;height: 100px;background: gold;}</style>
</head>
<body><!---<div id="box1"></div><div id="box2"></div>---><div id="box1"><div id="box2"></div></div>
</body>
</html>

margin自适应居中是可以的，上下自适应是不行的。
不设置content现象对盒子的影响是会自动计算容器大小，节省代码

<!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>/*#box{width: 400px;height: 100px;background: aquamarine;margin-left:auto;margin-right: auto;margin::0 auto;}*/#box1{width: 300px;height: 100px;background: blanchedalmond;color: white;padding-left:10px black solid;}#box2{height: 100px;background: rebeccapurple;color: white;padding-left: 30px;border-left: 10px black solid;}</style>
</head>
<body><div id="box1"><div id="box2">这是一些内容</div></div>
</body>
</html>

标签分类

按类型：

block：块 div、p、ul、li、h2等

 1、独占一行2、支持所有样式3、不写宽的时候，跟父容器的宽相同4、所占区域是一个矩形

inline：内联 span、a、em、strong、img等

 1、挨在一起2、有些样式不支持，例如：宽高3、不写宽的时候，宽度由内容决定4、所占区域不一定为矩形5、内联标签之间有空隙，换行产生

inline-block：内联块 input、select等

1、挨在一起，支持宽高

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

<!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>/*#box1{width: 100px;height: 100px;background: aquamarine;}#box2{width: 100px;height: 100px;background: aquamarine;}*/#content1{width: 100px;height: 100px;background: aquamarine;}#content2{width: 100px;height: 100px;background: aquamarine;}</style>
</head>
<body><!---<div></div><span></span><input type="text"><div id="box1">块1</div><div id="box2">块2</div>---><span id="content1">内联1</span><span id="content2">内联2</span>
</body>
</html>

按内容

flow：流内容
metadata：元数据
sectioning：分区
heading：标题
phrasing：措辞
embedded：嵌入的
interactive：互动的

按显示

替换元素：浏览器根据元素标签和属性，来决定元素的具体显示内容（img、input）
非替换元素：将内容直接告诉浏览器，将其显示出来（div、p、h1）

显示框类型

display：
block
inline
inline-block
none

 注：display：none 不占空间visibility：hidden 占空间

<!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>/*div{width: 100px;height: 100px;background: aqua;display: inline;}span{width: 100px;height: 100px;background: aqua;display:block ;}*/#box1,#box2{width: 100px;height: 100px;background: red;}#box1{display: none;}</style>
</head>
<body><!--<div>块1</div><div>块2</div><span>内联1</span><span>内联2</span><input type="text">--><div id="box1">块1</div><div id="box2">块2</div>
</body>
</html>

标签嵌套规范

ul、li、
dl、dt、dd
table、tr、td
块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签（特殊：a标签可以嵌套块标签）

溢出隐藏

overflow
visible:默认
hidden
scroll
auto
x轴，y轴

<!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>div{width: 300px;height: 300px;border: 1px black solid;overflow: scroll;}</style>
</head>
<body><div>溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏</div>
</body>
</html>

透明度与手势

opacity：0（透明）-1（不透明）占空间
rgba
cursor：手势（默认手势）
实现自定义手势：图片（后缀名：.cur, .ice）

<!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>#div1{width: 100px;height: 100px;background:aquamarine;opacity: 0.5;}#div2{width: 100px;height: 100px;background:rgba(255,0,0,1);cursor: pointer;}</style>
</head>
<body><div id="div1">这是一个块</div><div id="div2">这是一个块</div><p>这是一个段落</p>
</body>
</html>

最大、最小宽高

min-width
max-width
min-height
max-height

注：强化对百分比单位的理解

%单位：以父容器大小进行换算
一个容器适应屏幕高：容器加height：100%；body：100%；html：100%
html，body{height:100%;}
.contrainer{height:100%;}

<!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>body{height: 500px;}/*div{width: 200px;min-height: 200px;border: 3px rebeccapurple solid;}*/#box1{width: 200px;height: 200px;background: aquamarine;}#box2{width: 100%;height: 50%;background: blueviolet;}</style>
</head>
<body><div><!--这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容--><div id="box1"><div id="box2"></div></div></div>
</body>
</html>

CSS默认样式

有些标签有默认样式：

body（margin8个像素）
h1（上下margin21.440个像素）
p（上下margin16个像素）
ul（上下margin16个像素，左padding40像素）
默认点：list-style：disc
a：text-decoration：underline

有些标签没有默认样式：div span

CSS reset

简单的CSS reset：
*{margin:0;padding:0;}

优点：不用考虑那些标签有默认的margin和padding
缺点：稍微的影响性能

ul{list-style:none;}
a{text-decoration:none;color:#666;}
img{display:block;}

问题的现象：图片与容器底部有空隙
原因：内联元素对齐方式是按照文字基线对齐，而不是文字底线对齐
vertical-align: baseline：基线对齐方式，默认值

写具体页面时候或一个布局的时候：
1、写结构
2、css重置样式
3、写具体样式

float浮动

文档流

文档中可显示对象在排列时所占用的位置

float特性

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

floa取值

left
right
none（默认）

<!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>body{border: 1px black solid;}#box1{width: 100px;height: 100px;background: blanchedalmond;float: left;}#box2{width: 200px;height: 200px;background: blueviolet;float: left;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div>
</body>
</html>

float注意点

1、注会影响后面的元素
2、内容默认提升半层
3、默认宽根据内容决定
4、换行排列
4、主要给块元素添加，但也可以给内联元素添加

<!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>/*body{border: 1px black solid;}#box1{width: 100px;height: 100px;background: blanchedalmond;;}#box2{width: 200px;height: 200px;background: blueviolet;float: left;}#box3{width: 300px;height: 300px;background: aquamarine;}#box4{background: aqua;float: left;}*/ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}li{width: 100px;height: 100px;background: brown;border: 1px yellow solid;box-sizing: border-box;float: left;}li:nth-of-type(1){height: 120px;}li:nth-of-type(2){height: 140px;}span:last-of-type{float: right;}</style>
</head>
<body><!--<div id="box1"></div><div id="box2"></div><div id="box3">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div><div id="box4">这是一个没有宽度的块元素</div>--><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><span>aaa</span><span>bbb</span>
</body>
</html>

清除浮动

利用clear属性清除float浮动
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：

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

<!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>/*#box1{width: 100px;height: 100px;background: blue;float:both;}#box2{width: 200px;height: 200px;background: blueviolet;clear: both;}*/#box1{width: 200px;border: 1px black solid;}#box2{width: 100px;height: 200px;background: blueviolet;float: both;}.clear:after{content:**;clear:both;display:block}</style>
</head>
<body><!--<div id="box1"></div><div id="box2"></div><div id="box1"><div id="box2"></div><div class="clear"></div></div>aaaaaa--><div id="box1"><div id="box2"></div></div>aaaaaa
</body>
</html>

Web之一只jio碰到门了相关推荐

linux上设置tomcat下web项目只需要ip地址访问省略端口和项目名称
正常的请求一个项目的路径是:http://ip地址:端口号/项目名. 设置tomcat下conf文件下的server.xml配置文件实现只请求ip地址来访问项目 1 找到server.xml配置文件并 ...
房源租赁签约管理系统、租房系统、退租、续租、换租、转租、房源管理、招租系统、租期账单、合同管理、营销推广、租客系统、业主系统、web原型、业务流程、门禁系统、Axure原型、rp源文件
房源租赁签约管理系统.租房系统.退租.续租.换租.转租.房源管理.招租系统.租期账单.合同管理.营销推广.租客系统.门禁系统.业主系统.web原型.业务流程 .Axure原型.rp源文件 Axure原 ...
webapi输出炜json_asp.net web api只返回json数据格式
asp.net web api默认是同时支持返回xml和json数据格式的.这种机制是因为有web api框架中的SupportedMediaTypes的存在. 具体返回什么样的数据格式,你可以在请求 ...
web标准只包括html,HTML——01-前言WEB标准
人生苦短,要学就只学有用新直能分支调二浏页器朋代说的 [前端教学-遇新是直朋能到分览前言] 初识web开遇新是直朋能到发我们先来认识一下web前新直能分支调二浏页器朋代说端其实前发多架那况近的都里 ...
SQL server查询出只选修两门课程的学生学号和姓名
代码段: SELECT score.SId AS 学号,student.Sname AS 姓名 FROM score LEFT JOIN student ON score.SId=student.SI ...
实习生找java web工作时经常碰到培训班怎么破？
这个很好区分的如何区分呢?我来打个比方. 打着招聘java工程师的培训机构 1.以JAVA语言为开发基础,协助开发公司承接的各种软件平台项目 2.协助测试工程师制定的测试计划 3.协助项目经理完成各 ...
python web-python web入坑指南
原标题:python web入坑指南 Invest regularly in your knowledge portfolio. Make learning a habit. 自学python web ...
Web开发：HTML5、CSS、JavaScript必备教程
2019独角兽企业重金招聘Python工程师标准>>> Web开发:HTML5.CSS.JavaScript必备教程想开启Web开发的智慧之门吗?想DIY炫酷的网页特效设计吗?想通 ...
Web前端要学什么语言？需掌握哪些知识？
近几年随着IT行业的发展,出现了许多之前大家不知道和不了解的新技术.新岗位,Web前端开发就是其中之一.并且,在互联网快速发展的大环境下,这类专业技术人才需求越来越大,相对应所提供的薪酬待遇也在不断上 ...
用 Go 语言，做 Web 编程开发
人民邮电出版社和实验楼合作的第 15 本书来了! Web 介绍 Web 应用在我们的生活中无处不在.看看我们日常使用的各个应用程序,它们要么是 Web 应用,要么是移动 App 这类 Web 应用的变 ...

Web之一只jio碰到门了

Web之一只jio碰到门了

CSS选择器

标签选择器（又叫TAG选择器）

群组选择器（又叫分组选择器）

通配选择器

层次选择器

属性选择器

伪类选择器

CSS样式继承

CSS优先级

CSS盒子模型

盒子模型问题

标签分类

按类型：

按内容

按显示

显示框类型

标签嵌套规范

溢出隐藏

透明度与手势

最大、最小宽高

CSS默认样式

CSS reset

float浮动

文档流

float特性

floa取值

float注意点

清除浮动

Web之一只jio碰到门了相关推荐

最新文章

热门文章