css

css优先级

  • 总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 浏览器默认属性或继承

  • 1.属性后面加!import 会覆盖页面内任何位置定义的元素样式

    2.作为style属性写在元素内的样式

    3.id选择器

    4.类选择器

    5.标签选择器

    6.通配符选择器（*）

    7.浏览器自定义或继承

行内元素/块级元素，非替换元素/替换元素

  • 替换元素：浏览器根据标签的元素与属性来判断显示的内容。Input、img、textarea、select、object都是替换元素，这些元素没有实际内容。
  • 非替换元素：大部分html元素都是非替换元素，浏览器直接显示内容。
  • 块级元素：块级元素会独占一行，自动填满其父级元素的内容区域，旁边不允许有其他元素。p、div、table
  • 行内元素：行内元素旁边可以有其他元素。span、a、strong

img标签的title和alt属性

  • alt属性：如果图像下载或者加载失败，会用文字代替图像显示。这一作用给加载不出图片的用户提供信息，也方便程序员维护网页。
  • title属性：当网页上的图片加载完成后，鼠标移到图片上面，会显示这个图片指定的属性文字，以对图片进行补充性说明。

meta标签

  • meta标签的作用，标签内的内容不会显示在页面中，定义meta标签因为它对机器是可读的。
  • 常见的标签 name：用来描述网页；charset定义编码格式；http-equiv设置网页过期时间，自动刷新时间

position属性 absolute和fixed

  • 共同点： 改变行内元素的呈现方式，display被置为block 让元素脱离普通流，不占据空间默认会覆盖到非定位元素上
  • 不同点： absolute的”根元素“是可以设置的 fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

Flex

  • 使用了 display: flex 的元素称为容器(flex container)。flex 容器中存在两条轴，水平方向的主轴和垂直方向的交叉轴。容器中的每个单元称为flex item（项目）。在 flex 中有两种类型的属性：容器属性和项目属性。顾名思义，容器属性是在容器上配置的，项目属性则是针对项目的。

  • 在容器上可以设置6个属性：

    • flex-direction（设置主轴方向）
    • flex-wrap（主轴换行方式）
    • flex-flow（flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为row nowrap）
    • justify-content（项目在主轴上的对齐方式）
    • align-items（项目在交叉轴上的对齐方式）
    • align-content（多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用）

Flex 项目属性

  • 有六种属性可运用在 item 项目上:
    • order（项目的排列顺序。数值越小，排列越靠前，默认为0）
    • flex-grow（项目的放大比例，默认为0，即如果存在剩余空间，也不放大）
    • flex-shrink（项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）
    • flex-basis（定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。）
    • flex（flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。）
    • align-self（align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。）

css3新特性

  • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
    圆角 （border-radius:8px）
    多列布局 （multi-column layout）
    阴影和反射 （Shadow\Reflect）
    文字特效 （text-shadow、）
    文字渲染 （Text-decoration）
    线性渐变 （gradient）
    旋转 （transform）
    增加了旋转,缩放,定位,倾斜,动画，多背景
    transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

css实现水平居中

  • 行内元素：text-align： center;
  • flex布局：display:flex; justify-content:center;
  • 已设置width值：margin-left：auto；margin-right：auto；margin：0 auto；

css实现垂直居中

.box {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
}
  • flex布局：display:flex; justify-content:center; align-item:center;

css实现水平垂直居中

.box {
   background-color: #FF8C00;
   width: 300px;
   height: 300px;
   position: relative;
}
.content {
   background-color: #F00;
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -50px 0 0 -50px;
}
  • flex布局：display:flex; justify-content:center; align-item:center;

清除浮动的办法

  • 什么是浮动 float

    浮动是css的定位属性，会使元素从正常的文档流中脱离出来。浮动的框可以向左或向右移动，直到它的外边缘碰到另一个浮动的框为止。

  • 清除浮动的办法

    设置 clear：both说明两边都不是浮动元素，clear属性也可以设置left、right

盒模型

  • 标准盒子模型：内容content+内边距padding+边框border+外边距margin

  • 低版本IE盒子模型：ie模型的content包含padding和border

  • CSS 盒模型负责计算：

    • 块级元素占用多少空间。

    • 边框是否重叠，边距是否合并。

    • 盒子的尺寸。

      盒模型有以下规则：

    • 块级元素的大小由width、height、padding、border和margin决定。

    • 如果没有指定height，则块级元素的高度等于其包含子元素的内容高度加上padding（除非有浮动元素，请参阅下文）。

    • 如果没有指定width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。

    • 元素的height是由内容的height来计算的。

    • 元素的width是由内容的width来计算的。

    • 默认情况下，padding和border不是元素width和height的组成部分。

适配设备

  • media queries

    @media only screen and (max-width: 374px) {
  /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置样式*/
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
  /* iphone6/7/8 和 iphone x */
}
@media only screen and (min-width: 414px) {
  /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置样式 */
}

  • flex 布局

    高度定死，宽度自适应。随着屏幕宽度的变化，页面也会跟着变化，在宽度调整的时候使用响应式布局。

BFC （Blocking Formatting Context）

  • 一个页面由很多box组成，元素的类型和display属性，决定了这个box的类型。不同类型的box会参与不同的formatting context，box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不互相影响。

    触发条件 HTML 盒（Box）满足以下任意一条，会创建块格式化上下文：

    • float的值不是none
    • position的值不是relative或static
    • display取值为inline-block;table-cell;table-caption;flex;inline-flex之一的元素
    • overflow不是visible的元素

使元素消失的办法

  • visibality:hidde, 把元素隐藏起来，不会改变页面的布局，仍占据原有的空间，但绑定的事件不会触发
  • Index-z=-1, 将元素隐藏到其他页面后面
  • Display:none, 把元素隐藏起来，会改变页面的布局，可以理解为把元素删掉
  • Opacity:0 将元素变得透明，点击元素区域时事件仍会被触发

px rem em

雪碧图

  • 现方法：

    1. 使用生成器将多张图片打包成一张雪碧图，并为其生成合适的 CSS。
    2. 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。
    3. 使用图片时，将相应的类添加到你的元素中。

  • 好处

    减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。

    提前加载资源，防止在需要时才在开始下引发的问题，比如只出现在:hover伪类中的图片，不会出现闪烁。

画css三角形

<head>
    <style type="text/css">
        /* css3绘制三角形 */
        .triangle {
            width: 0px;
            height: 0px;
            border: 100px solid transparent;
            border-bottom: 300px solid #ffff11;
        }
    </style>
</head>

双栏布局/三栏布局

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • css基础
    # CSS样式规则overflow 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进...
    低调迷人的反派角色阅读 1,081评论 0赞 1
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,418评论 0赞 11
  • CSS3
    1、属性选择器：id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,748评论 0赞 7
  • CSS
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    从小就好看阅读 275评论 0赞 0
  • CSS
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    桃花兰岛主阅读 610评论 0赞 1

友情链接更多精彩内容