【CSS】基础与布局

语法

• css的语法：selector {property: value}，即 选择器{属性:值}
• style：分层设计的思想，css把和颜色，大小位置等信息剥离到< style >中

选择器

• 元素选择器：元素{ }
• id选择器：#id{ }
• 类选择器：.类{ }
• /* */：注释

尺寸

• width：宽度
• height：高度

背景

• background-color：背景色
• background-image：背景图
• background-repeat：背景重复，repeat：水平垂直方向都重复，repeat-x：只有水平方向重复，repeat-y：只有垂直方向重复，no-repeat：无重复
• background-size：contain为背景平铺(拉伸)
• color：属性值颜色
• text-align：对齐方式
• border：边框粗细大小颜色
• text-decoration：文本修饰，上划线overline，删除线line-through，下划线underline，闪烁blink，去掉下划线的超链none

文本

• line-height：行间距
• letter-spacing：字符间距
• word-spacing：单词间距
• text-indent：首行缩进
• text-transform：大小写，uppercase 全部大写，capitalize 首字母大写，lowercase 全部小写
• white-space：空白格。normal 默认，多个空白格或者换行符会被合并成一个空白格；pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行；pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行；nowrap 一直不换行，直到使用br

字体

• font-size：字体尺寸
• font-style:字体风格，normal 标准字体，italic 斜体
• font-weight：字体粗细，normal 标准粗细，bold 粗一点
• font-family：字库，default默认，宋体，黑体，楷体，微软雅黑
• font：字体声明在一起，例如：font:italic bold 50px “楷体”

鼠标

• cursor：鼠标样式，auto，crosshair十字，pointer指向，e-resize，ne-resize，nw-resize，n-resize，se-resize，sw-resize，text，wait，help，not-allowed

表格与边框

• table-layout：表格布局，automatic单元格的大小由td的内容宽度决定，fixed单元格的大小由td上设置的宽度决定
• border-collapse：表格边框，separate边框分隔，collapse边框合并
• border-style：边框风格，solid实线，dotted点状，dashed虚线，double双线
• border-color：边框颜色
• border-width：边框宽度
• border：都放在一起，例如：border:1px dotted LightSkyBlue
• border-方向：给一个方向设置边框风格，top、bottom、left、right

块级元素div默认是占用100%的宽度，div、h1、p等
内联元素span的宽度由其内容的宽度决定，a、b、strong、i、input等

内边距

• padding-left: 左内边距
• padding-right: 右内边距
• padding-top: 上内边距
• padding-bottom: 下内边距
• padding: 上 右 下 左

外边距

• margin-left: 左外边距
• margin-right: 右外边距
• margin-top: 上外边距
• margin-bottom: 下外边距

超链状态

• link - 初始状态，从未被访问过
• visited - 已访问过
• hover - 鼠标悬停于超链的上方
• active - 鼠标左键点击下去，但是尚未弹起的时候

隐藏

• display:none：隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
• visibility:hidden：隐藏一个元素，这个元素继续占有原空间，只是“看不见

绝对定位

• position：absolute，绝对定位，相当于把该元素从文档中删除了，只能通过绝对定位定位这个元素的位置。left、top绝对定位一个元素的位置，z-index：两个东西重合时，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

相对定位

• position：relative，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离。left、top相对定位一个元素的位置。

浮动

• float：left,right，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。原先的位置就让出来了
• clear：不允许浮动元素出现在哪里，left right both none

显示方式

• display：隐藏none、块级block、内联inline、内联-块级inline-block，列表list-item，表格table ，前后无换行的表格inline-table，单元格table-cell

水平居中

• align：center通过设置属性内容居中
• style：text-align:center通过样式内容居中
• margin: 0 auto使得元素居中

内容

• overflow：当内容溢出时的处理。visible默认值，内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。

垂直居中

• line-height：适合单独一行垂直居中
• oadding：借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上
• display: table-cell，把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果，这样对图片也可以居中

本文地址：https://blog.csdn.net/weixin_44485744/article/details/110226076