CSS学习

CSS

１、CSS

什么是CSS?

• CSS是指层叠样式表（Cascading Style Sheets）
• 样式定义如何显示HTML元素
• 把样式添加到 HTML 中，是为了解决内容和表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部阳光表通常存储在 CSS 文件中
• 多个样式定义可层叠为一个

CSS优点
节省时间、页面加载速度更快、易于维护、多设备兼容性

浏览器在样式表中从上到下读取样式定义。前面的样式可能被后面的样式覆盖。

内部使用：
HTML页面的标题部分将内部样式定义在< style >元素上。【CSS样式标签应该放置在HTML的< head >标签中】

外部引用CSS：
通过这种方法将所有的CSS样式保存在同一个后缀名为 .css 的拓展文件中。
然后通过html标签< link >在HTML页面的< head >部分将CSS文件引入。

在CSS样式规则中：
 各个属性与属性值间以​“键值对”​形式出现
 所有的属性设置都用​花括号​括起来
 属性名与属性值间用​冒号​连接
 多个键值对之间用​分号​分开

2、CSS选择器

• 元素选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
• 类型选择器：以 ==.（class选择符前缀）==加上对应的class名称组合成选择器的元素符号
• id选择器：​HTML元素​以id属性来设置​id选择器​,​CSS​中id选择器以​"#"​来定义。
• id选择器：不要​使用​数字​开头的 id 属性，因为在某些浏览器中可能出问题。
• id选择器：因为HTML页面中id标签的唯一性（不允许同时存在两个相同的id），所以id选择器的复用性相对较低，因此较为建议使用class选择器。

３、Box模型

４、对齐方式

５、position属性

６、float属性

• 该属性指定一个元素是否该浮动。
• 使用float时，可指定其他元素围绕它。
• 元素设置了​float​属性后会使​后面的元素​都受其​影响​，将环绕在其周围。为了避免这种情况，请使用clear属性​​。

float属性值

属性值	功能
left	使元素向左浮动
right	使元素向右浮动
none	确保元素不会浮动

clear属性值

属性值	功能
left	不允许左边有浮动对象
right	不允许右边有浮动对象
none	默认值，允许两边都可以有浮动对象
both	不允许有浮动对象

７、display属性

（１）块元素

• block(块元素)​​：是占用​最大可用宽度​的元素，此元素将显示为​块级元素​，此元素前后会带有换行符。
• block元素可以设置margin、padding、​width​和​height​属性。
• 块级元素即使设置了宽度，仍然是​独占一行
• 常见的块级元素有：​ ​div、p、ul、ol、li、h1~h6 ​​等

（２）内联元素

• 不独占一行
• inline元素的宽度是自身内容的宽度（默认有多少占多少）
• 设置width​和​height​属性​无效
• inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；竖直方向的设置不生效

（３）none

• 隐藏一个元素，且不占用任何空间
• 其子元素也将被隐藏

（４）inline-block

• 不独占一行​的​块级元素

８、宽（width）、高（height）

• 宽高可以以百分比来分配，也可以已==像素（px）==为单位
• 设置元素的最大或最小高度和宽度：min-width、min-height、max-width、max-height