CSS 学习笔记 2
CSS Table(表格)
表格边框 border: 1px solid black;
边框共享 border-collapse:collapse;
表格宽度和高度 Width和height属性定义表格的宽度和高度。
表格文字对齐 表格中的文本对齐和垂直对齐属性。
text-align: 属性设置水平对齐方式，向左，右，或中心：
vertical-align: 垂直对齐属性设置垂直对齐，比如顶部，底部或中间：top middle bottom
表格填充 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：padding
表格颜色 下面的例子指定边框的颜色，和th元素的文本和背景颜色：
<style> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style>
CSS 盒子模型
边距，边框，填充，和实际内容。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS Border(边框)
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。border:5px solid red; |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。border-top -left -right |
注意:"border-left-width" 单独使用没有效果.要先使用 "border-style" 属性设置borders.
CSS 轮廓（outline）属性
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
CSS margin(外边距) padding（填充）
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
单独使用 padding 属性可以改变上下左右的填充。
margin padding属性可以有一到四个值。
- margin:25px 50px 75px 100px;
- margin:25px 50px 75px;
- margin:25px 50px;
- margin:25px;
CSS 分组和嵌套
每个选择器用逗号分隔。h1,h2,p { color:green; }
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
CSS 尺寸 (Dimension)
| 属性 | 描述 |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
CSS Display(显示)
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
display:none 元素不再占用空间
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
CSS Display - 块和内联元素
块级元素(block)特性：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
- address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
- a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
- applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
CSS Position(定位)
- static 无特殊定位，遵循正常的文档流对象:
- relative 相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。
- fixed 即使窗口是滚动的它也不会移动：
- absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
- sticky 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
重叠的元素 z-index
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
| 属性 | 说明 |
|---|---|
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| clip | 剪辑一个绝对定位的元素 |
| cursor | 显示光标移动到指定的类型 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 |
| overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 |
| overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 |
| position | 指定元素的定位类型 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| z-index | 设置元素的堆叠顺序 |
CSS Overflow
用于控制内容溢出元素框时显示的方式。
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
CSS Float（浮动）
会使元素向左或向右移动，其周围的元素也会重新排列。 left right none
清除浮动 - 使用 clear clear:both;
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊：
CSS 对齐
元素居中对齐 margin: auto;。 要水平居中对齐一个元素(如 <div>), 可以使用 尝试一下 »
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
文本居中对齐 text-align: center; 尝试一下 »
.center { text-align: center; border: 3px solid green; }
提示: 更多文本对齐实例，请参阅 CSS 文本 章节。
图片居中对齐 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 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
左右对齐 - 使用 float 方式
.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }
当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。
我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题: .clearfix { overflow: auto; }
垂直居中对齐 - 使用 padding
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:
.center { padding: 70px 0; border: 3px solid green; }
如果要水平和垂直都居中，可以使用 padding 和 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 属性来设置垂直居中:
浙公网安备 33010602011771号