css增加横着滚动条_css基础重点知识

[TOC]

css基础重点知识

选择器

权重说明

!important > 行内样式style > id > class > 属性(title/href)/伪类(:active :focus) > 标签/伪元素(:before)

建议:

• 避免使用!important;
• 利用id增加选择器权重;
• 减少选择器的个数（避免层层嵌套）;

主要的选择器

| 例子 | 说明 | | ----------------------------------------------- | :----------------------------------------------------------- | | * | 所有元素 | | .box #box div | 最常用的选择器 | | [target] [target=a] [title~=a] lang|=en | target可以换成任意单词;title中是a的元素,lang用于设置语言, title用于设置悬浮提示 | | , | 和 | | 空格或者 > | 父子 | | + | 毗邻的后面元素 | | :link和:active :visited :hover | 点击时/正常/悬浮, 注意: hover必须在:link和:visited之前 | | input:focus | 输入时的样式 | | :before/after | 前/后增加内容, 一般在{} 里面加上comtent | | first-line first-letter first-child | 首行 /首字母(汉字) /第一个出现的元素(包含它的所有子元素) |

更多请参考

文本样式

| 样式 | 说明 | | ------------------------------------------------------------ | ------------------------------------------------------------ | | font=font-style+font-weight+font-size/line-height+font-family | 可同时设置normal/italic/bold/lighter/100(可以不写) + 大小 + 行高 + 字体类型 | | list-style : none | 去掉序列号 | | text-decoration : none/underline/line-through/overline | 下划线/删除线/上划线 | | text-align : center/right/left | 左右对齐方式 | | color : rgba(0,0,0,0.3) | 颜色&透明度 | | text-shadow : 10px 10px 5px pink | 阴影位置: 横坐标[正数向右]，纵坐标（正数向下），阴影值，阴影颜色 | | text-transform : uppercase/lowercase/capitalize | 大写/小写/标题式 | | font-variant : small-caps | 全部大写, 用大小来区分原先的大 | | letter-spacing / word-spacing/white-space/text-indent | 字母(汉字)间距/单词间距/不换行/首行缩进 | | list-style-type : upper-roman | 序列排序类型 |

盒子样子

| 样式 | 说明 | | ------------------------------------------------------------ | ------------------------------------------------------------ | | box-sizing : border-box boxsizing必须要与高度或宽度添加, IE8及以上版本支持该属性，其他需要加上特定的属性：如-moz-box-sizing : border-box;（支持火狐） | 内行 | | width/height/padding/margin | / | | box-shadow : 10px/10px/5px/5px/pink | 横坐标[正数向右]，纵坐标（正数向下），阴影值，阴影大小，阴影颜色 | | border/outline = border-width + border-style + border-color ; border-style包括solid dotted dashed double groove( 凹槽 ) ridge( 垄状 ) inset( 嵌入 ) outset( 外凸 ) Hidden/none( 隐藏 );
border-style如果后面加3种样式, 表示从上边开始顺时针的每条边的风格,border-color或者border-width也都是一样的 | 内边框/外边框 | | border-radius : 2px | 圆角 | | background = background-color + background-image + background-repeat + left/center +background-attachment | 图片 | | background-size : cover / contain / 30% | 图片尺寸 | | max-height : 30px | line-height对图片没有任何作用, 如果需要设置图片尺寸可以用这个, 表示最大高度 | | overflow : auto / hidden ; | 溢出 | | overflow: hidden ；white-space: no-wrap; text-overflow: ellipsis ; | 多出部分省略号表示 | | ::-webkit-scrollbar { display: none;} | 隐藏滚动条 | | Display : none(不占位置); visibility: hidden(占位置) | 隐藏 | | opacity : 0.3 | 透明度 |

私有属性(浏览器知识)

| 内核 | 浏览器 | 私有属性 | | ------------ | ---------------------------------- | -------- | | Webkit(大头) | UC/安卓内置/chrome/safari/qq浏览器 | -webkit- | | Gecko | 火狐 | -moz- | | Trident | 微软IE浏览器 | -ms- | | Presto | opera | -o- |

动画

方式1:

1. 定义动画:

@keyframes moving{ from{ background: gold; } to{ background: pink; } }

1. 应用动画

``` animation: moving 500ms 100ms infinite alternate ; / 动画名A+时间+运动方式（linear/ease/steps）+延缓多少s+播放次数（1/2/infinite：无限）+是否反向还原（normal/alternate /

```

1. 动画状态

animation-play-state: paused/running;

方式2

| 动作 | 描述 | | ------------------------------------------------------------ | ----------------------------------- | | transform translate/scale/skew | 位移/缩放/斜切 | | transform : perspective(800px) rotateX() rotateY() rotateZ(); | 设置3D | | transform-origin: left top | 设置变化中心点 | | transition : all 500ms ease | 变化的元素+时间+运动方式linear/ease |

布局

布局分类

| 名称 | 特点 | | ---------- | ------------------------------------------- | | 静态布局 | pc上用px来写,移动端使用不同的域名如wap.或m. | | 流式布局 | 百分比搭配min-* 或者max-*来写 | | 自适应布局 | 分辨率变化时, 元素位置变化而大小不变 | | 响应式布局 | 不同设备返回不同样式 | | 弹性布局 | rem/em布局 |

媒体查询(响应式方法)

@media(max-width:1200px){
      div{
        color:green;
      }
    }

| 尺寸大小 | 宽度 | | -------- | ---------- | | 大屏幕 | ≥ 1200px | | 默认PC | ≥980px | | 平板 | ≥768px | | 手机 | 480px |

更多尺寸规范

绝对布局

• 元素位置position left top
• relative (比例和大小都是相对于父级元素和原始大小)
• absolute (比例和大小都是相对于上一级, 并且服人于上一级. 元素离开下面的元素会顶替上来.)
• Fixed (固定)
• 元素方向 float
• left/right (如果父元素没有设置长度,需要给父元素设置 overflow: hidden)
• 去掉浮动 : float: none 或者clear: both
• 元素权重z-index
• z-index (数字越大越靠前, 只对都有加上定位的元素有用)

flex布局

• 父级设置（总体） display: flex

| 动作 | 选项 | 说明 | | ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | flex-wrap | nowrap wrap wrap-reverse | 是否换行 | | flex-direction | row(默认) column row-reverse column-reverse | 方向 | | flex-flow | / | 同时设置flex-wrap和flex-direction | | justify-content | flex-start(默认) flex-end center space-between space-around | 横向排列 | | align-items | flex-start/baseline(默认) flex-end center stretch | 纵向排列(按每一行的高度来排列,如果没有换行则跟align-content一样) | | align-content | flex-start(默认) flex-end center space-between space-around stretch | 纵向排列(按父元素的调试来排列, 要与flex-wrap搭配使用) |

• 子级设置（局部）

| 动作 | 选项 | 说明 | | ----------------------- | ----------------------------------------------------- | -------------- | | align-self | flex-start flex-end center baseline stretch | 纵向排列 | | order | 数字 | 数值越小越靠前 | | flex-basis | 具体px | 元素具体大小 | | flex-shrink/flex-grow | 数字 | 元素比例大小 |

grid布局

| 说明 | 父容器 | 子容器 | | ------------------------------------------------------------ | ------------------------------------------------------------ | --------------------------- | | 容器性质 | dispaly: grid/inline-grid | / | | 设置尺寸&个数, 可以与repeat(4, 100px)搭配, 可以填写具体尺寸,也可以填1fr等比例; | grid-template-columns/rows | / | | 统一设置尺寸, 必须填写具体尺寸 | grid-auto-columns/rows | / | | 容器命名 | grid-template-areas: "a b c" "d e f" | grid-area: a | | 合并选项 | grid-area: 上左右下 | / | | 列表方向, 设置了横向后grid-template-columns就无法决定一行放几个,设置几个数值就对前几个产生影响; | grid-auto-flow: column(全部排成一横, 默认横向) | / | | 列表间距 | grid-gap grid-row-gap grid-column-gap | / | | 对齐, 选项有start end center | justify-content align-content[ 相对的对象是整个父容器 ]; justify-items align-items [相对的对象是单行自身的元素] | justify-self align-self |

grid练习题

其他技巧

• 内联元素去掉间隙
• 父元素font-size=0;
• 内联元素自动设置font-size;
• 屏幕自动调整大小
• meta:vp + tab(一般都有的)
• 关于百分比
• 不能用百分比写border的宽度；
• 如果用百分比写padding，那么指的是父元素width的百分之多少，无论是水平的padding还是竖直的padding；
• 如果用百分比写margin，那么指的是父元素width的百分之多少，无论是水平的margin还是竖直的margin。