CSS随笔

选择器

标签选择器
- p{}
类选择器
- .class1{}
id选择器
- #class1{}
通配符 *
后代选择器匹配标签下所有元素//
- ul li a{}
- .className li a{}
子元素选择器仅匹配子元素/
- .className > a{}
并集选择器|
- div,ul {}
伪类选择器
- 链接伪类选择器
  - a:link /*选择所有未被访问过的链接*/
  - a:visited /*选择所有已被访问过的链接*/
  - a:hover /*选择鼠标悬停的链接*/
    
  - a:active /*选择活动链接(鼠标按下未弹起的链接)*/
- focus 伪类选择器选取获得焦点（光标）的表单元素
  - 一般情况 <input> 类表单元素才能获取，因此这个选择器主要针对表单元素
    input: focus{}

字体

font-style//字体样式（italic斜体,normal正常）
font-weight//字体粗细（700加粗，400正常）
font-size/line-height//字体大小（px）// 12px/1.5（1.5：行高为当前文字大小1.5倍）
font-family//字体系列，取首位有效字体
字体复合属性顺序， font-style font-weight 可省略
body{
font: font-style font-weight font-size/line-height font-family
}

文本

color red/ #FFFFFF// rgb(0,0,0)
text-align 文本对齐
- left(默认)
- right
- center
text-decoration 下划线
- underline
- line-through
- overline
- none
text-indent 缩进
- text-indent: 3em;//3个当前文字距离
- text-indent: 30px;
line-height 行间距
- line-height: 25px
- 垂直居中：行高==盒高//c3盒子模型内容高度为减去边框padding后的内容height

css 引入

内部样式表

<style>    
   .red_box {
       width: 500px;
       height: 200px;
       color: red;
       background-color: aqua;}
       </style>

行内样式表
<p style = "color: red;">风雨过后</p>
外部样式表
<link rel="stylesheet" href="style.css">

padding 属性是以下各内边距属性的简写属性：
- padding-top
- padding-right
- padding-bottom
- padding-left

块元素行内元素行内块元素

块元素
<h1>-<h5> <p> <div> <ul> <li>等
- 可以控制宽度高度内边距
- 宽度默认是父级宽度100%
- 独占一行
- 容器
- 文字类元素内不能使用块级元素<p> <h1>-<h6>
行内元素
<a> <span> <em> <b>
- 一行可以显示多个行内元素
- 高宽度设置无效
- 默认宽度是它本身的宽度
- 行内元素只能容纳文本或其他行内元素
- 链接内不能放标签
- 特殊情况<a>里面可以放块级元素，//<a> 转换块级模式
行内块元素
<img> <input> <td>
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度行高外边距可控制
元素显示模式转换
- 行内元素a转换为块级元素
  - a{height: 10px; display: block;} //设置点击区域
- 转换为行内元素（不能设置宽高）
  - display: inline
- 转换为行内块
  - display: inline-block

背景

背景颜色
- background-color :transparent; //默认透明
背景图片
- background-image: (url)
默认水平和垂直方向平铺
- background-repeat: repeat | no-repeat | repeat-x | repeat-y
位置
- background-position: x y;background-position: left top;
- background-position: top|center|bottom|left|center|right
- 使用方位名词与顺序无关,省略时居中
是否滚动
- background-attachment: fixed|scroll...
复合属性 background :颜色地址平铺滚动位置
- background: transparent url(x.png) no-repeat fixed top
背景色半透明
- background: rgba(0,0,0,0.3)//a 不透明度仅背景颜色
  - background: rgba(0, 0, 0, 0.6) url(./pic/bgi.png) no-repeat fixed top;
- opacity: 0.3;//所有子元素继承相同透明度

CSS特性

层叠性 //就近
继承性 //子继承父
优先级
- 继承或* < 元素选择器< 类选择器 < id选择器 < 行内style < important // color: xxx!important 权重((0,0,0,0) (0,0,0,1) 0010,0100,1000,无穷大)
- 权重的叠加,不进位
- 继承：0
  - 不继承:
    -li: .nav li(10+1=0011)

盒子模型

border边框 (border/border-top/border-left...)
- border-width//边框的粗细px
- border-style//边框样式//实线 solid 虚线dashed 点线dotted...
- boeder-color
- border-collapse//表格细线边框
- border 复合写法 border: 1px solid transparent
- 边框影响盒子大小（边框width独立于盒子宽高）
- border-radius: 5px;
  - border-radius: 50%;//长度50%
  - border-radius: 10px 20px 30px 40px;//左上-顺时针
  - border-top-left-radius: 10px;//左上
content 内容px
padding 内边距
- 边框与内容之间的距离
- 复合写法
  - 一个值:padding: 2px;上下左右
  - 两个值:padding: 2px 5px;上下2，左右5
  - 三个值:padding: 1px 2px 3px;上1 左右2 下3
  - 四个值padding:1px 2px 3px 4px;上1 右2 下3 左4 (顺时针)
- 影响盒子大小
  - 盒子本身没有指定width/height属性，则此时padding不会撑开盒子宽/高
marjin 外边距盒子之间距离
- marjin-botton/top/
- 复合同padding
- 水平居中块级盒子
  - 盒子必须指定宽度
  - 左右外边距设置为auto
  - marjin-left: auto;marjin-right: auto;
  - marjin: 0 auto
- 水平居中行内元素
  - 父元素添加 text-aline: center
- 水平居中行内块元素
  - 父元素添加 text-aline: center
- 外边距合并-嵌套块元素塌陷

.fa {
            width: 200px;
            height: 200px;
            background-color: fuchsia;
            margin: 200px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
            margin-top: 10px;//margin-left无塌陷
        }

- 父子块同时添加marjin，仅父块移动(max 2)，子块相对父块不动
  - 为父元素定义(单/多)边框 border 分离块
    -  border: 1px solid transparent;
  - 为父元素定义内边距
  - 为父元素添加overflow:hidden

清除内外边距

   * {
        margin: 0;
        padding: 0;
    }

行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距(可以转换成行内块元素 display:inline-block)
阴影
- box-shadow: h-shadow v-shadow blur spread color inset;
- 水平位置允许负值
- 垂直位置的阴影
- (可选)模糊距离//虚实
- (可选)尺寸
- (可选)颜色
- (可选)将外阴影(outset)改为内阴影inset
  - 文字阴影 text-shadow: 1px 1px rgba()

布局方式

多个块级元素纵向排列-标准流
多个块级元素横向排列-浮动（ - 行内块空隙）

标准流

块级，行内元素

浮动

浮动元素会脱离标准流(脱标)
- 不保留原先的位置，（浮动图层）
浮动元素会一行内显示并且元素顶部对齐
浮动元素会具有行内块元素的特性
- 行内元素/块元素添加浮动->行内块元素(width,height)
与标准流父级一起使用；一浮全浮
浮动只影响后面的标准流，不影响前面的标准流
- 元素浮动，后面的标准流占据浮动元素（重叠），
- 不影响浮动元素前面的标准流（浮动元素前面的标准流独占一行，浮动元素另起一行，上限为标准流底部）
清除浮动
- 清除浮动元素脱离标准流造成的影响
- 闭合浮动只让浮动在父盒子内部影响不影响父盒子外面的其他盒子
- 父级盒子不方便给高度，浮动盒子不占有位置，导致父级盒子高度为0
  - 额外标签法（隔墙法）
    - 在浮动元素末尾添加一个空的块级标签
    - div
  - 父级元素添加overflow: //hidden
  - :after伪元素父级添加clearfix类

        .clearfix:after {
          content: "";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
        .clearfix
        {
          *zoom:1;
        }

双伪元素

      .clearfix:before,
      .clearfix:after {
        content: "";
        display: table;
      }
      .clearfix:after
      {
        clear:both;
      }
      .clearfix
        {
          *zoom:1;
        }

定位position

静态定位 static
相对定位 relative
- 相对原来的位置
- 不脱标，保留原来位置
- 宽度默认变为100%
绝对定位 absolute
- 没有父元素或父元素未定位，以浏览器为基准(Document)
- 父元素有定位（相对，绝对，固定定位），则以最近一级有定位的父元素为参看点(子绝父相)
- 脱标，不占有位置
- 水平/垂直居中
  - left: 0%
  - margin-left: -1/2width px;
- 宽度默认变为0
固定定位 fixed
- 固定于浏览器可视区的位置（浏览器页面滚动时元素位置不会改变）
- 不占有原来位置
- 宽度默认变为0
粘性定位 sticky
- 以浏览器可视窗口为参照点（fixed）
- 占有原先的位置（relative）
- 必须添加top/left/right/bottom之一才有效
- 不兼容ie
定位叠放次序 z-index
- 只有定位的盒子有z-index
- 数值越大越靠上
- z-index: 1;
定位特殊特性
- 行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
- 块级元素添加绝对定位或固定定位，如果不给高度或宽度，默认大小是内容的大小
- 浮动元素只会压住下面标准流的盒子，不会压住文字或图片（文字环绕）
- 绝对定位或固定定位会压住所有内容

元素显示隐藏

display
- display: none;//隐藏，位置不保留
- display: block;//显示/块
visibility
- visibility: visible;
- visibility: hidden;//隐藏后继续保留原来位置
overflow
- 溢出
- visible(默认)
- hidden
- scroll//显示滚动条（溢出and不溢出）
- auto//溢出显示滚动条
- 可能隐藏有溢出的定位元素

CSS 高级技巧

精灵

精灵图
- 将多个小背景图整合到一个大图片减少请求次数
- background-img
- background-position:x y;//左上移动为负
- background: url() no-repeat -1px -2px;

三角

将盒子width height 设为零
width: 0;
height: 0;

.jd {
            width: 0;
            height: 0;
            border: 50px solid blue;
            border-top-width: 87px;
            border-bottom-width: 87px;
            border-top-color: black;
        }

.box .ms i {
            position: absolute;
            right: 0;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px 30px 0px 0px;
            border-color: transparent white transparent transparent;
        }

鼠标样式

cursor: default//pointer/move/text/not-allowed
表单边框(input textarea..)
outline // 取消外边框 outline: none;
防止文本域移动
resize: none

垂直居中

vertical-align 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片：
- 行内元素行内块元素
- <./p/Snipaste_2021-08-19_08-24-45.png>
- 由于图片默认(行内块元素)与文字基线对齐(base-line)
  - 产生图片底侧空白缝隙
    - 1.更改vertical-align: bottom...
    - 1. display: block

溢出文字省略号表示

单行文本溢出省略号显示
- 条件:
  - 强制一行内显示文本
    - white-space: nowrap (默认normal 自动换行)
    - 超出部分隐藏
      - overflow: hidden
    - 文字用省略号代替超出的部分
      - text-overflow: ellipsis
多行文本溢出省略号显示(控制盒子大小)
- 有较大兼容性问题，适合webKit浏览器或移动端

word-break: break-all;单词所有单词碰到边界一律拆分换行

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

margin负值

使浮动盒子边框重叠
显示被覆盖的盒子边框-提高层级
- 无定位
  - 鼠标经过增加position: relative;
- 有定位
  - z-index

文字围绕浮动元素

浮动元素不会压住文字

块级元素 text-align: center;

块中行内元素，行内块元素与其内容水平居中

css 初始化

/* 把所有标签内外边距清零 */
        * {
            padding: 0;
            margin: 0;
        }
        /* em 和 i 斜体的文字不倾斜 */
        em,
        i {
            font-style: normal;
        }
        /* 去除li的小圆点 */
        li {
            list-style: none;
        }
        img {
            /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
            border:0;
            /* 取消图片底侧有空白缝隙的问题 */
            vertical-align: middle;
        }
        button {
            /* 鼠标经过button 鼠标样式变为小手 */
            cursor: pointer;
        }
        a {
            /* 取消链接下划线 */
            color: #666;
            text-decoration:none;
        }
        a:hover {
            color: #c81623;
        }
        button,
        input {
            font-family: Microsoft YaHei,.....
        }
        body {
            /* 抗锯齿性 让文字显示的更加清晰 */
            -webkit-font-smoothing: anitialiased;

        }
        /* 清除浮动 */
        .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix
      {
        *zoom:1;
      }

HTML5新特性

<video>
- 常见属性
  - autoplay: autoplay;//视频就绪自动播放(谷歌浏览器需用muted解决自动播放问题)
    - <video src="#" muted></video>
  - ...https://www.runoob.com/tags/tag-video.html
audio
- autoplay 谷歌浏览器禁用
- ...https://www.runoob.com/tags/tag-audio.html
input类型
- type: search 限制输入内容
- ....https://www.runoob.com/tags/att-input-type.html
新增表单属性
- required=required // 表单拥有该属性表示其内容不能为空
- placeholder = 提示文本//表单的提示信息,存在默认值将不再显示
- autofocus = autofocus//自动聚焦属性,页面加载完成自动聚焦到指定表单
- autocomplete
- multiple= multiple //可以多选文件提交

CSS3新增

属性选择器[]//权重10

input[value]//只选择有value的input//权重11
input[type=text]//只选择type=text的input
input[type^=val]//以val开头
input[type$=val]//以val结尾
input[type*=val]//含有val

结构伪类选择器

E:first-child//匹配父元素中的第一个子元素E
E:last-child//匹配父元素中的最后一个E元素
E:nth-child(n)//匹配父元素中第n个子元素E
- 根据: 前面的空格位置判断父元素
  - ul :first-child//ul中第一个子元素
  - ul li:first-child//ul中第一个li元素
  - lu li :first-child//ul中li的第一个子元素
nth-child(even)//第偶数个
nth-child(odd)//奇数
nth-child(n)//n=0,1,2....第0个和超出的被忽略
- 2n
- 2n+1
- 5n [5,10,15...]
- n+5 [5,]
- -n+5 [1,..5]
section div:nth-child(1)
- section 第一个子元素需要为div
  - nth-child 会把所有的盒子排列序号
  - 执行时先看 :nth-child(1) 之后回去看前面div //是否匹配//选择//忽略
nth-of-type
section div:nth-of-type(1)
- 会把指定的盒子排序
- 执行时先看 div指定的元素之后回去看 :nth-of-type(1)

伪元素选择器

利用CSS创建新标签元素
选择符：
- ::before 在元素内部的前面插入内容
- ::after 在元素内部的后面插入内容
清除浮动

css3盒子模型

box-sizing: content-box 盒子大小为width+padding+border(默认)
box-sizing: border-box 盒子大小为width// padding和border不会撑大盒子（前提是padding border不超过width）//IE怪异盒模型

图片模糊处理

filter: blur(5px);//blur模糊处理数值越大越模糊

CSS3 calc函数计算css声明的属性值

width: clac(100% - 30px);

CSS过渡

transition: 要过度的属性花费时间 (运动曲线) (何时开始) //谁做过渡给谁加
transition: width 1s
transition: width 1s, height 1s;
transition: all 0.5s//所有元素

posted @ 2021-08-14 16:56 w0000 阅读(280) 评论(0) 编辑收藏举报

刷新页面返回顶部

w0000