挑战全栈工程师系列之CSS(二)
CSS 分组和嵌套选择器
CSS 分组选择器
h1,h2,p {
color:green;
}
CSS 嵌套选择器
p {
color:blue;
text-align:center;
}
.marked {
background-color:red;
}
.marked p {
color:white;
}
p.marked{
text-decoration:underline;
}
CSS Dimension(尺寸)
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。
CSS 尺寸属性
- height
- line-height
- max-height
- max-width
- min-height
- min-width
- width
height
设置元素的高度。
- 属性值
- auto 默认。浏览器会计算出实际的高度。
- length 使用 px、cm 等单位定义高度。
- % 基于包含它的块级对象的百分比高度。
p.ex {
height:100px;
width:100px;
}
line-height
设置行高。
- 属性值
- normal 默认。设置合理的行间距。
- number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
- length 设置固定的行间距。
- % 基于当前字体尺寸的百分比行间距。
p.small {
line-height:90%;
}
p.big {
line-height:200%;
}
max-height
设置元素的最大高度。
- 属性值
- none 默认。定义对元素被允许的最大高度没有限制。
- length 定义元素的最大高度值。
- % 定义基于包含它的块级对象的百分比最大高度。
p {
max-height:50px;
}
max-width
设置元素的最大宽度。
- 属性值
- none 默认。定义对元素的最大宽度没有限制。
- length 定义元素的最大宽度值。
- % 定义基于包含它的块级对象的百分比最大宽度。
p {
max-width:100px;
}
min-height
设置元素的最小高度。
- 属性值
- length 定义元素的最小高度。默认值是0。
- % 定义基于包含它的块级对象的百分比最小高度。
p
{
min-height:100px;
}
min-width
设置元素的最小宽度。
- 属性值
- length 定义元素的最小宽度值。默认值:取决于浏览器。
- % 定义基于包含它的块级对象的百分比最小宽度。
p {
min-width:1000px;
}
width
设置元素的宽度。
- 属性值
- auto 默认值。浏览器可计算出实际的宽度。
- length 使用 px、cm 等单位定义宽度。
- % 定义基于包含块(父元素)宽度的百分比宽度。
p.ex {
height:100px;
width:100px;
}
CSS Display(显示)
display属性设置一个元素应如何显示
- 属性值
- none 此元素不会被显示。
- block 此元素将显示为块级元素,此元素前后会带有换行符。
- inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
h1.hidden {
display:none;
}
CSS Visibility(可见性)
visibility属性指定一个元素是否是可见的。
- 属性值
- visible 默认值。元素是可见的。
- hidden 元素是不可见的。
- collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
h2 {
visibility:hidden;
}
CSS Position(定位)
position 属性指定了元素的定位类型。
- 属性值
- static 没有定位(默认)
- fixed 窗口定位
- relative 相对定位
- absolute 绝对定位
- sticky 粘性定位
static
- HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
- 静态定位的元素不会受到 top, bottom, left, right影响。
div.static {
position: static;
border: 3px solid #73AD21;
}
fixed
- 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
- Fixed定位使元素的位置与文档流无关,因此不占据空间。
- Fixed定位的元素和其他元素重叠。
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
relative
- 相对定位元素的定位是相对其正常位置。
- 移动相对定位元素,但它原本所占的空间不会改变。
- 相对定位元素经常被用来作为绝对定位元素的容器块。
h2.pos_left {
position:relative;
left:-20px;
}
h2.pos_right {
position:relative;
left:20px;
}
absolute
- 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于
<html>
- absolute 定位使元素的位置与文档流无关,因此不占据空间。
- absolute 定位的元素和其他元素重叠。
h2 {
position:absolute;
left:100px;
top:150px;
}
sticky
- sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
- position: sticky; 基于用户的滚动位置来定位。在 position:relative 与 position:fixed 定位之间切换。
- 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
- 这个特定阈值指的是 top, right, bottom 或 left 之一,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
z-index
- z-index属性指定了一个元素的堆叠顺序
- 如果两个定位元素重叠,没有指定z-index,最后定位在HTML代码中的元素将被显示在最前面。
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
CSS Overflow(布局)
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
- overflow 属性只工作于指定高度的块元素上。
- 属性值
- visible 默认值。内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
CSS Float(浮动)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
CSS 浮动属性
- float
- clear
float
float属性指定一个盒子(元素)是否应该浮动。
- 属性值
- left 元素向左浮动。
- right 元素向右浮动。
- none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
img {
float:right;
}
clear
clear属性指定段落的左侧或右侧不允许浮动的元素。
- 属性值
- left 在左侧不允许浮动元素。
- right 在右侧不允许浮动元素。
- both 在左右两侧均不允许浮动元素。
- none 默认值。允许浮动元素出现在两侧。
img {
float:left;
}
p.clear {
clear:both;
}
CSS 对齐
元素居中对齐
- 要水平居中对齐一个元素(如
<div>
), 可以使用 margin: auto;。 - 设置到元素的宽度将防止它溢出到容器的边缘。
- 元素通过指定宽度,并将两边的空外边距平均分配:
- 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
文本居中对齐
- 如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;
.center {
text-align: center;
border: 3px solid green;
}
图片居中对齐
- 要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:
img {
display: block;
margin: auto;
width: 40%;
}
左右对齐 - 使用定位方式
- 我们可以使用 position: absolute; 属性来对齐元素:
- 绝对定位元素会被从正常流中删除,并且能够交叠元素。
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
- 当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
- 当使用 position 属性时,IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是 )设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时,请始终设置 !DOCTYPE 声明:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
左右对齐 - 使用 float 方式
- 也可以使用 float 属性来对齐元素
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
- 当像这样对齐元素时,对
<body>
元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。 - 如果子元素的高度大于父元素,且子元素设置了浮动,那么子元素将溢出,这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。
- 可以在父元素上添加
overflow: auto;
来解决子元素溢出的问题:
.clearfix {
overflow: auto;
}
- 当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略
!DOCTYPE
声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时,请始终设置!DOCTYPE
声明:
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
垂直居中对齐 - 使用 padding
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:
.center {
padding: 70px 0;
border: 3px solid green;
}
- 如果要水平和垂直都居中,可以使用 padding 和 text-align: center
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
垂直居中 - 使用 line-height
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行,添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
垂直居中 - 使用 position 和 transform
- 除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
CSS 组合选择符
组合选择符说明了两个选择器直接的关系。
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于 > 号分隔)
- 相邻兄弟选择器(以加号 + 分隔)
- 普通兄弟选择器(以波浪号 ~ 分隔)
后代选择器
后代选择器用于选取某元素的后代元素。
div p {
backgroud-color: yellow;
}
子元素选择器
子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素。
div>p {
background-color:yellow;
}
相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
div+p {
background-color:yellow;
}
普通兄弟选择器
普通兄弟选择器选取所有指定元素之后的相邻兄弟元素。
div~p {
background-color:yellow;
}
CSS 伪类
CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法:selector:pseudo-class {property:value;}
CSS类也可以使用伪类:selector.class:pseudo-class {property:value;}
所有CSS伪类/元素
- :checked input:checked 选择所有选中的表单元素
- :disabled input:disabled 选择所有禁用的表单元素
- :empty p:empty 选择所有没有子元素的
<p>
元素 - :enabled input:enabled 选择所有启用的表单元素
- :first-of-type p:first-of-type 选择的每个
<p>
元素是其父元素的第一个<p>
元素 - :in-range input:in-range 选择元素指定范围内的值
- :invalid input:invalid 选择所有无效的元素
- :last-child p:last-child 选择所有
<p>
元素的最后一个子元素 - :last-of-type p:last-of-type 选择每个
<p>
元素是其父元素的最后一个<p>
元素 - :not(selector) :not(p) 选择所有
<p>
以外的元素 - :nth-child(n) p:nth-child(2) 选择所有
<p>
元素的父元素的第二个子元素 - :nth-last-child(n) p:nth-last-child(2) 选择所有
<p>
元素倒数的第二个子元素 - :nth-last-of-type(n) p:nth-last-of-type(2) 选择所有
<p>
元素倒数的第二个为<p>
的子元素 - :nth-of-type(n) p:nth-of-type(2) 选择所有
<p>
元素第二个为<p>
的子元素 - :only-of-type p:only-of-type 选择所有仅有一个子元素为
<p>
的元素 - :only-child p:only-child 选择所有仅有一个子元素的
<p>
元素 - :optional input:optional 选择没有"required"的元素属性
- :out-of-range input:out-of-range 选择指定范围以外的值的元素属性
- :read-only input:read-only 选择只读属性的元素属性
- :read-write input:read-write 选择没有只读属性的元素属性
- :required input:required 选择有"required"属性指定的元素属性
- :root root 选择文档的根元素
- :target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
- :valid input:valid 选择所有有效值的属性
- :link a:link 选择所有未访问链接
- :visited a:visited 选择所有访问过的链接
- :active a:active 选择正在活动链接
- :hover a:hover 把鼠标放在链接上的状态
- :focus input:focus 选择元素输入后具有焦点
- :first-letter p:first-letter 选择每个
<p>
元素的第一个字母 - :first-line p:first-line 选择每个
<p>
元素的第一行 - :first-child p:first-child 选择器匹配属于任意元素的第一个子元素的
<p>
元素 - :before p:before 在每个
<p>
元素之前插入内容 - :after p:after 在每个
<p>
元素之后插入内容 - :lang(language) p:lang(it) 为
<p>
元素的lang属性选择一个开始值
CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
伪元素的语法:selector:pseudo-element {property:value;}
CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;}
所有CSS伪类/元素
- :link a:link 选择所有未访问链接
- :visited a:visited 选择所有访问过的链接
- :active a:active 选择正在活动链接
- :hover a:hover 把鼠标放在链接上的状态
- :focus input:focus 选择元素输入后具有焦点
- :first-letter p:first-letter 选择每个
<p>
元素的第一个字母 - :first-line p:first-line 选择每个
<p>
元素的第一行 - :first-child p:first-child 选择器匹配属于任意元素的第一个子元素的
<p>
元素 - :before p:before 在每个
<p>
元素之前插入内容 - :after p:after 在每个
<p>
元素之后插入内容 - :lang(language) p:lang(it) 为
<p>
元素的lang属性选择一个开始值
原文地址:https://www.cnblogs.com/twoshuai/p/15010132.html
- Python学习教程 (六)
- TP-Link网络摄像机的多个漏洞详细分析
- 彻底搞清楚 RxJava 是什么东西
- 走近科学:Android系统ROOT后有多脆弱?
- JNI动态注册native方法及JNI数据使用
- VectorDrawable与AnimatedVectorDrawable
- Cytoscape教程(一)
- XSS编码剖析
- window环境下搭建react native及相关插件
- React Native ios开发第一课
- Pandas使用 (一)
- 火眼(FireEye)实验室FLARE IDA Pro脚本系列:MSDN注释插件
- 上传高通量测序原始文件
- 超能教程 十分钟学会 Python!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Zookeeper——分布式一致性协议及Zookeeper Leader选举原理
- 使用KEIL C51实现的简单合作式多任务操作系统内核(单片机实现版本)
- Zookeeper——基本使用以及应用场景(手写实现分布式锁和rpc框架)
- 函数指针数组指针+结构体数组
- Zookeeper——Watcher原理详解
- 51多任务系统,可以运行
- notepad++中设置python运行
- Dubbo——SPI及自适应扩展原理
- Dubbo——服务发布原理
- Dubbo——服务引用
- Dubbo——服务调用过程
- Dubbo——服务目录
- 消息队列——ActiveMQ使用及原理浅析
- 字符串操作——C语言实现
- MongoDB——基本使用及集群搭建