CSS层叠的问题、标准文档流、伪类选择器
一、层叠的问题
CSS有两个性质:
1、继承性
2、层叠性:选择器的一种选择能力,谁的权重大就选谁
层叠性又分为:
1)、选不中:走继承性 (font、color、text、) 继承性的权重是0
若有多个父级都设置了样式,走就近原则
2)、选中了
a、权重的问题,权重大,就选谁的样式
b、权重相同,谁在后,选择谁
*纯标签和类没有可比性,纯类和ID也没有可比性
二、标准文档流
1、含义:浏览器的排版是根据元素的特征(快和行级),从上往下,从左到右排版,这就是标准文档流
2、浮动 float:left/right
效果:
1)、块级加float
a:两个元素都加浮动,后面的元素会紧跟前面的元素并排排列,只要加了float,这个元素就会脱离标准文档流
b:第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位,而第一个依然存在,所以就会叠加
2)、行级加float
行级元素加float,脱离标准流,块不像块,行不像行,但能设置宽高,能并排排列,但Display就没有意义了
拓展:
使用元素标准流的方法:
a、浮动:float
b、绝对定位:position:adsolute;
c、固定定位:position:fixed; (fixed 固定的)
2、浮动带来的好处
给元素加了浮动,撑不起父级的高度了
3、清除浮动
a、给浮动的父级添加高度
b、给父级添加overflow:hidden;
c、给浮动元素的后面添加一个空的div,添加样式为clear:both;
<ul>
<li>首页</li>
<li>新闻</li>
<div style-clear:"both;"></div>
</ul>
d、给浮动元素的父级添加一个类叫clearfix (clearfix 清除格式)
这个类的写的样式属性有:
.clearfix:after{
content:"";
display:"block";
clear:"none";
height:0;
visibility:"hidden"; visibility 可见的
}
*注:伪类选择器
只要选择后面带;都可以说他是伪类选择器
a:hover{} a:visited{} a:active{} p:after{} p:before;
超链接的四种状态:
a:link{
color:blue;
}
a:visited{
color:red;
}
a:hover{
color:green;
}
a:active{
color:yellow;
}
*这四种超链接的状态的顺序不能改变
伪元素和伪类选择器的区别:
伪元素有两个冒号,如 P:after{} 伪类选择器有一个冒号,P:hover{}
注:
1、margin:0 auto;和text-align:center;
margin的居中是对自身; text-align是对元素内部的文本集中的
2、visibility:hidden;和display:none;
visibility:隐藏之后还占据空间
display:隐藏后不占据空间
CSS层叠的问题、标准文档流、伪类选择器的更多相关文章
- 前端css盒模型及标准文档流及浮动问题
1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...
- python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809
---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...
- css标准文档流
css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- 浅谈,html\css脱离标准文档流相关
(个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- 页面标准文档流、浮动层、float属性(转)
CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...
- day 41 标准文档流 浮动
一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...
随机推荐
- POJ1087 A Plug for UNIX —— 最大流
题目链接:https://vjudge.net/problem/POJ-1087 A Plug for UNIX Time Limit: 1000MS Memory Limit: 65536K T ...
- 可加装广告的swf播放器JS代码
加载flash动画前可以加载代码,设定广告显示秒数这些,还有些小bug,等有空了修复好法上来给大家 1. [代码][Java]代码<!DOCTYPE html PUBLIC "-/ ...
- cassandra复制到一个新机器编译失败的问题
在A机器上ant编译后,复制到B机器,在B机器上编译会出错. 原因是载入一些文件时出错,因为路径还是A机器上的路径. 经过与git上的源代码对比,发现多了一个build文件夹,这可能是ant生成的目录 ...
- Struts2的各种标签库
1 在JSP中使用taglib编译指令导入标签库 <%@ taglib prefix="s" uri="/struts-tags" %> ----- ...
- 「LuoguP3384」【模板】树链剖分
题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式 ...
- 「HNSDFZ暑期集训 测试1」「LuoguT36485」 括号(贪心
Description 给定一个由左括号'('和右括号')'组成的字符串s,其中第i个括号的权值为ai. 我们定义一个括号序列t为合法括号序列,当且仅当满足下列条件之一: 1.t为空串 2.t=(A) ...
- Python之路,Day13 - 堡垒机
项目实战:运维堡垒机开发 前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多人觉得,堡垒机就是跳板机,其实这个认识是不全面的,跳板功能只是堡垒 ...
- Streamline Your App with Design Patterns 用设计模式精简你的应用程序
Back to Design Patterns Streamline Your App with Design Patterns 用设计模式精简你的应用程序 In Objective-C progra ...
- Spring之配置文件加载方式
spring在org.springframework.core.io包中提供了多种配置文件加载方式.无论是XML.URL还是文件,都有很好的支持.比如基于URL的UrlResource.基于输入流的I ...
- Windows 下openssl安装与配置
编译thirift失败 网上方法很多,大部分是针对32位机的,自己的电脑因为是win7,64位,摸索了很久才安装成功. 环境 WIN7, 64位, vs2005 下载ActivePerl 配置过程中需 ...