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 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式 ...
随机推荐
- 使用kong-dashboard
具体命令行操作只需按照官网一步一步来即可(https://docs.konghq.com/1.4.x/getting-started/configuring-a-service/),这里介绍图形化操作 ...
- 【BZOJ1492】【Luogu P4027】 [NOI2007]货币兑换 CDQ分治，平衡树，动态凸包
斜率在转移顺序下不满足单调性的斜率优化\(DP\),用动态凸包来维护.送命题. 简化版题意:每次在凸包上插入一个点,以及求一条斜率为\(K\)的直线与当前凸包的交点.思路简单实现困难. \(P.s\) ...
- Python 分页和shell命令行模式
前言 除了手动添加你的文章后外,你还可以用命令行来添加,python 自带了一种命令行 就是 shell 快速添加博文:Shell命令行模式 在你的目录下:mysite python manage.p ...
- 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
(本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...
- 【JZOJ2156】【2017.7.10普及】复仇者vsX战警之训练
题目 月球上反凤凰装甲在凤凰之力附身霍普之前,将凤凰之力打成五份,分别附身在X战警五大战力上面辐射眼.白皇后.钢力士.秘客和纳摩上(好尴尬,汗). 在凤凰五使徒的至高的力量的威胁下,复仇者被迫逃到昆仑 ...
- Apache Flink CEP 实战
本文根据Apache Flink 实战&进阶篇系列直播课程整理而成,由哈啰出行大数据实时平台资深开发刘博分享.通过一些简单的实际例子,从概念原理,到如何使用,再到功能的扩展,希望能够给打算使用 ...
- [人物存档]【AI少女】【捏脸数据】两个人物
点击下载(城通网盘):8bcd58f40ad162d9c1fd6f641edfa9ec8b13cdf8.png 点击下载(城通网盘):AISChaF_20191110015122738.png
- anaconda 安装caffe,cntk,theano-未整理
一,anancona 安装 https://repo.anaconda.com/archive/ conda create -n caffe_gpu -c defaults python=3.6 ca ...
- linux 硬件时间 系统时间
建了一个虚拟机,发现每次重启后系统时钟总是跟现有时间相差10多个小时 用date -s进行修正之后,再次重启又出现该问题.于是怀疑跟硬件时钟有关 用hwclock看了下,发现的确硬件时钟的时间存在差异 ...
- #419 Div2 Problem C Karen and Game (贪心 && 暴力)
题目链接:http://codeforces.com/contest/816/problem/C 题意 :给出一个 n*m 的变化后的矩阵,变化前矩阵的元素全是0,变化的规则是选择其中的一行或者一列将 ...