CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组选择器
——————> 
嵌套选择器
能适用于选择器内部的选择器的样式
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
控制高宽
增加行间距
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素
- 块元素是一个元素，占用了全部宽度，在前后都是换行符【如<p> <h1> <div>】
- 内联元素只需要必要的宽度，不强制换行【如<a> <span>】
内敛元素和块元素的相互转换
li {display:inline;} //变为内敛
span {display:block;} //变为块
内敛和块的特性
visibility属性
——————> 
重叠的元素————z-index指定堆叠顺序
定位属性
注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明
控制内容溢出元素框时显示的方式
添加滚动条
元素溢出元素框【显示在外面】
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
彼此相邻的浮动
——————> 
清除浮动
clear 属性指定元素两侧不能出现浮动元素
CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动的更多相关文章
- 归纳篇（一）CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility
盒子模型 Box Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...
- css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）
一.css在线150个例子 http://www.w3cschool.cc/css/css-examples.html 二.背景图片水平方向重复 : body { background-image:u ...
- CSS：使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- 超赞的CSS3进度条 可以随进度显示不同颜色
原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...
- 【总结整理】display与position之间的关系【较完整】（转）
display与position之间的关系 以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的 ...
- 6.bootstrap 将文本内容关联一个动作（手机端导航适配）&在超小尺寸下显示，屏幕变大后消失
1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...
- display与position之间的关系
以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式 ...
随机推荐
- python virtualenv和virtualenv的使用
首先下面的步骤我都是在windows下执行,Python2.7,pip==19.1.1 1.安装virtualenv pip install virtualenv 2.新建virtualenv vir ...
- 接口测试断言详解(Jmeter)
接口测试是目前最主流的自动化测试手段,它向服务器发送请求,接收和解析响应结果,通过验证响应报文是否满足需求规约来验证系统逻辑正确性.接口的响应类型通过Content-Type指定,常见的响应类型有: ...
- java数据结构复习02
1.递归问题 1.1汉诺塔问题(递归) 问题描述三个柱子,起初有若干个按大小关系顺序安放的盘子,需要全部移动到另外一个柱子上.移动规则:在小圆盘上不能放大圆盘,在三根柱子之间一次只能移动一个圆盘.移动 ...
- Spring Boot JPA - Querydsl
https://lufficc.com/blog/spring-boot-jpa-querydsl
- TCP/IP基础总结性学习（2）
简单的HTTP协议 一.HTTP 协议用于客户端和服务器端之间的通信 客户端和服务器的定义:请求访问文本或图像等资源的一端称为客户端,而提供资源响应的一 端称为服务器端.在两台计算机之间使用 HTTP ...
- chrome获取页面element的xPath
chrome真的是强大的工具 1.在chrome打开的页面点击F12,进入开发者模式 2.点击弹出的开发者工具左上角的跟踪箭头,再点击需要跟踪的页面元素,html程序定位到元素在程序中位置 3.选中的 ...
- POJ-2762-Going from u to v or from v to u（强连通， 拓扑排序）
链接: https://vjudge.net/problem/POJ-2762 题意: In order to make their sons brave, Jiajia and Wind take ...
- 【NOIP2017模拟12.3】子串
题目 分析 对于当前枚举串 \(now\),从前往后扫.若扫到 \(i\),\(s_i\) 是 ; \(s_j\) 的子串 \((i < j < now)\),我们就可以跳过不匹配 \(i ...
- 汇总apply()、call()、bind()用法详解
先看明白下面: 例 1 obj.objAge; // 17 obj.myFun() // 小张年龄 undefined 例 2 shows() // 盲僧 比较一下这两者 this 的差别,第一个打印 ...
- Tensorflow在win10下的安装（CPU版本）
环境:win10,64位 1.卸载python3.7,安装python3.6 由于之前已经安装了python,到tensorflow网站查看tensorflow的支持环境,https://tensor ...