本文共 1015 字,大约阅读时间需要 3 分钟。
CSS样式表可以通过以下几种方式引入到HTML文件中:
方式一:直接在HTML标签中加入style属性,多个样式用分号分隔
方式二:将CSS样式表放在Head标签内,使用style标签包裹(主流方式)
方式三:通过链接导入外部CSS文件
CSS选择器用于选择HTML元素并对其进行样式操作。常见的选择器包括:
标签选择器:直接使用标签名,如div、p等
类选择器:通过在标签中添加class属性定义类名,选择器使用.class表示
ID选择器:通过在标签中添加id属性定义ID名,选择器使用#id表示
CSS盒子模型由四个部分构成:
1. 元素内容:
2. 内边距:
3. 边框:
4. 外边距:
盒子的宽度和高度指的是内容区域(包括内边距)的总和。边框需要指定宽度和类型。背景色由内容区域和内边距共同决定。
外边距合并发生在两个或多个元素在垂直方向上紧接的情况下。合并的条件是两个元素的外边距高度中最大者决定了合并后的外边距高度。通常情况下,块级元素会有较大的外边距合并。
块级元素占据独特的一行,并从新的一行开始排列。它们可以设置宽高和内外边距宽度,高度则不完全继承。常见块级元素包括div、p、h1到h6、ol、ul、dl、li、form和table等。
行级元素与其他行级元素共处一行,从左到右排列。它们不能设置宽高,仅能调整内外边距,宽高由内容决定。常见行级元素包括span、a、b、strong、i、strike、br、u、textarea、input、select和img等。
行内块元素本质上属于行级元素,但可以设置宽高和内外边距。常见行内块元素包括input、img、select和button等。通过将display属性设置为inline-block可将块级元素转换为行内块。
浮动允许元素脱离标准流,漂浮在页面顶部或底部。浮动元素只影响后续元素的布局,不会影响前面的元素。浮动的特点包括:
1. 浮动只影响后面的元素
2. 连续浮动元素会占用同一行
3. 浮动以元素顶部对齐
4. 浮动可以实现布局模式转换
语法表示为float:left或float:right,右对齐时使用float:right。
清除浮动时,可以通过清除浮动的父容器或使用clear:both等方法来防止后续元素上移。
转载地址:http://tesvz.baihongyu.com/