码迷,mamicode.com
首页 > Web开发 > 详细

CSS_06

时间:2020-02-10 09:21:45      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:生成页面   webkit   行内元素   放大   str   flow   -o   cal   wrap   

.复杂选择器

3.伪类选择器

 ①目标伪类target

 ②结构伪类

elem:first-child{} 代表两个条件

匹配elem的父元素的第一个儿子(elem的大哥)

这个大哥必须是elem元素

elem:last-child{}

匹配elem的父元素的最后一个儿子(elem的小弟)

这个最小的弟弟必须是elem元素

elem:nth-child(n)

匹配elem的父元素的第n个儿子(n从1开始)

这个儿子也必须是elem元素

 ③匹配空元素

:empty{}

空元素

空元素:没有文本,没有空格,没有其他子元素的元素

 ④:only-child

匹配,当前元素是其父元素的唯一的子元素

 ⑤否定伪类

:not(selector)

/*除了第一个a标签,其它a的字体都变成黄色 */

a:not(:first-child){color:#ff0;}

/*除了第三个a标签,其它a的字体都变成蓝*/

a:not(:nth-child(3)){color:#f0f;}

4.伪元素选择器

 ①内容伪元素

1::first-letter{ } 或 :first-letter{}

 匹配首字符的样式

2::first-line{ } 或 :first-line{}

 匹配首行的样式

 当首行和首字符冲突的时候,以首字符为准

3.::selection{} 必须是两个 ::

 匹配选中部分的文字样式

 注意:只能改变字体颜色和背景颜色

  ②伪元素选择器,内容生成

使用css,添加httml元素,称之为伪元素内容生成

:before 或者 ::before

匹配到某个元素的内容区域的最前面,

添加一个内容,content:添加的文本或者图片

               display:是设置这个添加的内容的显示规则

::after 或者 :after

匹配到某个元素的内容区域的最后面,添加一个内容

 

注意:content中,只能添加文本或者图片

      我们可以理解为在内容区域中,最前或者最后面,添加了一个元素。这个元素的显示方式,由display来设定

 ③伪元素内容添加,可以解决的问题

1.外边距溢出

 #parent::before{

  content:"";

  display:table;

 }

2.思考,伪元素内容添加,解决高度坍塌?

#d1:after{

content:"";

display:block;

clear:both;

}

.弹性布局(重点*******************************************)

1.什么是弹性布局

是一种布局方式

主要解决某个元素中子元素的布局方式

为布局提供很大灵活性

2.弹性布局相关的概念和名词解释

 

1.容器

要发生弹性布局的子元素,他们的父元素称之为容器

容器要设置属性display:flex;

2.项目

要发生弹性布局的子元素们,称之为项目

就是设置了display:flex那个元素的,子元素们

3.主轴

项目们在容器中排列的方向,就是主轴

如果项目横向排列,x轴就是主轴

如果项目纵向排列,y轴就是主轴

项目们的排列顺序,靠主轴的起点和主轴的终点来定义

4.交叉轴

与主轴垂直相交的一条轴,叫做交叉轴

项目们在交叉轴上的对齐方式,是交叉轴的起点和终点

3.语法

display,写在父元素中

取值:1.flex 将块级元素设置为容器

      2.inline-flex 将行内元素设置为容器

特点:

1.弹性项目,默认x是主轴,主轴起点在左侧

  (块级元素横向排列的第二个解决方案)

2.项目的float/clear/text-align/vertical-align属性失效

3.每个项目可以自由的设置尺寸

4.容器的属性

 ①主轴的方向

flex-direction:

取值: row默认值,主轴是x轴,主轴起点是左端

       row-reverse,主轴是x轴,主轴起点是右端

       column 主轴是y轴,主轴起点是顶端

       column-reverse 主轴是y轴,主轴起点是底部

 ②设置项目换行

flex-wrap:

取值  nowrap 默认值,容器空间不够,也不换行,项目自动缩小

      wrap 空间不够就换行

      wrap-reverse 换行并反转

 ③主轴方向,项目换行的缩写

flex-flow:

取值 direction wrap

 ④定义项目在主轴上的对齐方式

justify-content:

取值 1.flex-start 默认值,以主轴起点对齐

     2.flex-end 以主轴终点对齐

     3.center 在主轴上居中对齐

     4.space-between 主轴两端对齐,两端无空白

     5.space-around 每个间距大小相同

 ⑤项目在交叉轴上的对齐

align-items:

取值1.flex-start 交叉轴起点对齐

     2.flex-end 交叉轴终点对齐

     3.center 交叉轴居中对齐

     4.baseline 交叉轴基线对齐

     5.stretch 前提,项目不写高,占满交叉轴上所有的空间

5.项目的属性

 ①order

定义项目的排列顺序

取值,无单位整数,值越小,越靠近主轴起点

 ②flex-grow

定义项目的放大比例

如果容器有足够大的剩余空间,项目将按比例方大

取值:无单位的数字   默认值0,不放大

 ③flex-shrink

定义项目缩小的比例,容器空间不够时,项目该如何缩小

取值,无单位数字 默认值1. 取值越大,缩小比例越大。0,不缩

 ④align-self

设置此项目在交叉轴上的对齐方式,不影响其它项目

取值:flex-start

      flex-end

      center

      baseline

      stretch

      auto 使用容器定义的align-items的值

三.CSS hack

div{

  background:-webkit-linear-gradient(....);

  background:-o-linear-gradient(....);

  background:-ms-linear-gradient(....);

  background:-moz-linear-gradient(....);

}

由于不同的浏览器对css的解析认知不同,会导致同一份css在不同浏览器中生成页面效果不同

面对这种情况,开发人员需要针对不同浏览器写不同的css

这个行为,就叫做css hack

tmooc有css hack相关拓展视频

四.转换(重点**************************)

1.什么是转换

改变元素在页面中的位置,大小,角度,以及形状

2D转换。只在x轴和y轴发生的转换效果

3D转换。增加了z轴的转换效果。3D是模拟出来的

2.转换的属性

transform:
取值 1.none 默认值,无任何转换效果

     2.transform-function 转换函数

       表示1个或者多个转换函数

       如果是多个转换函数,每个函数之间用空格分开

       transform:translate(400px) rotate(90deg);

学习转换,就是学习转换函数

CSS_06

标签:生成页面   webkit   行内元素   放大   str   flow   -o   cal   wrap   

原文地址:https://www.cnblogs.com/luwei0915/p/12289774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!