美文网首页
Css知识点(1)

Css知识点(1)

作者: crayona | 来源:发表于2019-10-16 15:46 被阅读0次

flex0                                                                                            

1设置display  flex时  子元素的  float  clear  vertical-align将消失   

2flex-direction  排列方向row水平方向 默认在左边     .box{flex-direction:rows |flex-reverse|column |flex-reverse}

flex-wrap  怎么换行   no-wrap   wrap  wrap-reverse

flex-flow   是flex-direction flex-wrap的简写模式

justify-content  定义项目在主轴上的排列方式

align-items定义项目在交叉轴上的排列方式

align-content 多根轴线的对齐方式

order项目的排列方式   数值越小  越靠前  默认为0

flex-grow  项目放大比例

flex-shrink  项目缩小比例

align-self  允许自己与其他项目有不同的排列方式


bfc块级格式化上下文  

其实就是符不符合文档流  溢出

方式:

a根元素为body

b浮动元素  float

c绝对定位  position:absolute;

d  行内块  display:inline-block

e  overflow   除了visiable以外的值


link 应用的css会同步加载

@import引用的css页面全部被加载完之后再加载

@import  引入的样式不能通过dom更改


单冒号的是伪类  双冒号的是伪元素  

双冒号 伪元素  ::after

单冒号  伪类    :before


chrome 支持小于12px的字体 用scale 缩小

用transform:scale(0.8)


display:inline行内元素  宽高无效  margin  Padding的上下距离是无效的              (宽高无效,上下margin无效)

display:block块级元素  独占一行  垂直方向排列                                                   (独占一行,垂直方向排列)


清除浮动

a  父级给高度                                              给父级高度

b空标签   尾部空标签  clear:both                伪类  :after{clear:both;content:'';display:block;}

c 父:after  clear:both;content:'';display:block;           空标签{clear:both;}

d  父级也浮动                                                           父级也浮动

e父级加 display:table                                               父级变成table


选择器

包含选择器   span  i

子选择器  第一层  span> i   第一层i

相邻选择器  span +p   与span相邻的p

兄弟选择器  span~i   i可以有多个

属性选择器   input[type="text"]

link  visited hover active选定的激活状态  :focus聚焦  :after选定元素的后面插入

相关文章

  • 导航条制作(1-1)

    html代码: css代码: CSS知识点:(1)四种引入 CSS 的方式:style 属性、style 标签、c...

  • 17-进阶: 第一个JS作品

    本节知识点----- CSS知识点 如何写渐变颜色的样式?谷歌 css gradient generate ,之后...

  • day04

    A我今天学习到了什么 1温习day03的知识点 1.1css背景 1.2.css文本 1.3.css字体 1.4....

  • Css知识点(1)

    flex0 1设置dis...

  • JavaWeb技能一栏

    知识点列表: 开发: 1、页面开发:HTML,CSS,JavaScript,jQuery,BootStrap,La...

  • html+css知识点梳理

    前端知识点梳理 HTML+CSS部分 1. 怎么将元素水平垂直居中 使用css方法父盒子设置 使用css3的tra...

  • css3+js翻页效果三:书本翻页

    css样式是酱紫的: 这里面有几个比较重要的css3知识点: 1、transform-style:preserve...

  • 前端基础知识点

    1.html常见知识点 2.css常见知识点 3.js常见知识点 数组知识点 4.计算机网络知识点 5.数据结构 ...

  • CSS基础知识一

    知识点导航 一、CSS初步认识

    CSS整体感知 css 是 cascading style sheet 层叠...

  • sass核心知识点

    sass 核心知识点 1、什么是CSS预处理器,什么是Sass (1) CSS 预处理器用一种专门的编程语言,进行...

网友评论

      本文标题:Css知识点(1)

      本文链接:https://www.haomeiwen.com/subject/hrzymctx.html