CSS 与 HTML基础加强

正则表达式常用

派生选择器中间用空格空开 */
- A b A为上一级标签限定在A 下面的这个b标签的特性当对子标签进行修饰时那个具体那个优先级就高
id选择器指定标签id # 来进行定义
类选择器使用 . 来进行定义 class也可以用与作派生选择器搭配使用
属性选择器
- 对带有指定属性的元素进行修饰直接在html中进行修改
- 属性和值选择器
CSS背景
- padding 内边距
- background-position: right top; 显示的位置右边图片顶部开始显示
  - 110px 10ox ：表示距离上面和距离左边的px值
  - %
- background-image:url('paper.gif')
text文本格式
- text-align:justify 每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
- 装饰器 text-decoration 对文字进行装饰上划线下划线删除线等
- text-transform:uppercase 控制文本大小写
- 文本缩进 text-indent:50px; 来指定文本的第一行的缩进

- 链接属性严格按照顺序
  - a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */
列表样式
- list-style-image 可以指定图片作为列表样式的前标
- list-style-position 标志点的位置 outside inside
- list-style-type 设置图标的类型
表格 table
- boder 边框 border:1px solid black; 双边框效果
- border-collapse: collapse; 设置table 为折叠变宽也就是单边框
- padding:15px 控制里面的内容与边框的距离
CSS BOX
- Margin(外边距) - 清除边框外的区域，外边距是透明的。

dashed: 定义一个虚线边框

solid: 定义实线边框最常用

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

CSS Position(定位)

position 属性指定了元素的定位类型。只有现指定position 属性后面的定位才有效

position 属性的五个值：

static 静态定位的元素不会受到 top, bottom, left, right影响。
relative 相对定位元素的定位是相对其正常位置。
fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：常用于广告的显示
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
sticky 粘性定位。它的行为就像 position:relative; 当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 https://www.runoob.com/try/try.php?filename=trycss_position_sticky

属性用于控制内容溢出元素框时显示的方式。在对应的元素区间内添加滚动条。

CSS Float(浮动)

浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

Flex布局

总结：

flex container

flex-items

DeepM

发布了30 篇原创文章 · 获赞 12 · 访问量 1万+

私信关注