文档章节

CSS3

wytao1995
 wytao1995
发布于 09/18 15:54
字数 1619
阅读 8
收藏 0

一.复杂选择器

1.兄弟选择器 具备相同父级元素的平级元素之间称为兄弟元素 注意:兄弟选择器,只能往后,不能往前找

    (1).相邻兄弟选择器,获取紧紧挨着某元素后面的兄弟元素 选择器1+选择器2{}

    (2).通用兄弟选择器,获取某元素后面所有满足条件的兄弟元素 选择器1~选择器{}

2.属性选择器 id class name type value style title.... 允许通过元素所附带的属性及其值来匹配页面元素

基本语法 [attr]{}

attr表示任意属性 可以匹配页面中所有附带attr属性的元素

elem[attr]{} elem[attr1][attr2]....{}

匹配页面中所有附带attr属性的elem元素

[attr=value]

匹配attr属性为value的元素

elem[attr=value]

匹配attr属性为value的elem元素
[attr^=value]

匹配属性值以value开头的元素

[attr$=value] 匹配属性值以value结尾的元素

[attr*=value] 匹配属性值中含有value的元素

[attr~=value] 匹配属性值中含有指定的单词的元素

3.伪类选择器 :link :visited :hove :active :focus

    (1).目标伪类(锚点) 突出显示活动的HTML锚点元素,匹配被激活的锚点元素 elem:target{}

    (2).结构伪类

        :first-child 匹配的是该元素的父元素的第一个孩子----子元素的大哥

        :last-child 匹配的是该元素的父元素的最后一个孩子----子元素的小弟

        :nth-child(n) 匹配的是该元素的父元素的第n个孩子 n从1开始 

        :empty 匹配没有子元素的元素 回车,空格,文本都不能写,才算没有子元素

        :only-child 匹配的元素是父元素中唯一的子元素

        :not 否定伪类,将满足指定选择器的元素,排除在外 :not(selector){}

 

4.伪元素选择器

    :first-letter{}或者::first-letter{ } 匹配修改第一个字符的样式

    :first-line或者::first-line{ } 匹配修改第一行字符的样式

     ::selection{} 匹配修改选中文本的样式---只支持字体颜色和背景颜色

5.伪类选择器

1.内容生成

内容,既可以是文本,也可以是元素

1.1:before或者::before

  匹配元素内容区域之前

1.2:after或者::after

  匹配元素内容区域之后

1.3内容属性

  向匹配的位置处添加内容

  取值:1.字符串

        2.图片  url(路径)

1.4高度坍塌

#parent:after{

content:"";display:block;clear:both;

}

1.5外边距溢出

#d3:before{

content:"";display:table;

}

二.弹性布局

1.什么是弹性布局

弹性布局是一种布局方式

主要解决一个元素中的子元素的布局方式,为布局提供最大的灵活性

2.弹性布局的相关概念

1.弹性布局的容器

  要把子元素布局成弹性布局的父元素称为容器

2.弹性布局的项目

  要布局的子元素称之为项目

3.主轴

  项目们排列的方向,称之为主轴

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

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

4.交叉轴

 与主轴垂直相交的方向,称之为交叉轴

 

3.语法

将元素变为弹性容器之后,那么他的所有子元素将变为弹性项目

所有项目都允许按照弹性布局的方式排列

display:

取值:flex,将块级元素变为容器

      inline-flex,将行内元素变为容器

注意:

1.元素设置为flex容器之后

  子元素,项目的float/clear/vertical-align属性失效

2.元素设置flex容器之后,子元素项目允许修改尺寸

3.容器的对齐方式text-align失效

4.容器的属性

1.flex-direction 方向  11:19上课

设置主轴的方向

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

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

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

      4.column-reverse主轴是y轴,主轴起点是底端

2.flex-wrap 不压缩,换行

当一个主轴排列不下所有的项目时,可以设置换行显示

取值:1.nowrap 默认值,空间不够时也不换行,项目会自动缩小

      2.wrap 换行

      3.wrap-reverse 换行并反转

3.flex-flow

是flex-direction和flex-wrap的缩写

取值1.row nowrap 默认值

     2.column wrap 等组合

4.justify-content

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

取值

   1.flex-start在主轴的起点对齐

   2.flex-end 在主轴的终点对齐

   3.center   在主轴居中对齐

   4.space-between 两端对齐

   5.space-around 每个间距相同

5.align-items

项目在交叉轴上对齐的方式

取值:1.flex-start 默认值,在交叉轴起点对齐

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

      3.center    在交叉轴居中对齐

      4.baseline  在交叉轴基线对齐

      5.stretch    如果项目为设置尺寸,在交叉轴上占满所有空间

5.项目的属性

这组属性只能设置在某一个项目上

不影响其他项目的效果

1.order

 定义项目排列的顺序,值越小越靠近主轴起点,默认值为0

取值:取值,无单位整数

2.flex-grow 

定义项目的放大比例

如果容器有足够大的空间,项目将按照比例放大

取值:无单位整数,默认值为0,不放大

取值越大,占据的剩余空间越多

3.flex-shrink

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

取值,无单位整数,默认值为1

取值为0,不缩小

取值越大,缩小越快

4.align-self

定义当前项目在交叉轴上的对齐方式

取值:1.flex-start 默认值,在交叉轴起点对齐

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

      3.center    在交叉轴居中对齐

      4.baseline  在交叉轴基线对齐

      5.stretch    如果项目为设置尺寸,在交叉轴上占满所有空间

      6.auto 继承父元素的align-items效果

© 著作权归作者所有

上一篇: CSS--转换
下一篇: CSS--列表
wytao1995
粉丝 1
博文 53
码字总数 33926
作品 0
六安
私信 提问
25个免费及收费CSS3的导航菜单

免费的 CSS3 导航和菜单 How to spice up your menu with CSS3 Blur Menu with CSS3 Transitions Creative CSS3 Animation Menus Pure CSS DropDown Menu Dark Menu: Pure CSS3 Two Level Me......

小编辑
2012/03/02
1K
1
50 个优秀 CSS3 技巧和优美的设计教程

Filter Functionality with CSS3 Thumbnail Proximity Effect with jQuery and CSS3 Fullscreen Background Image Slideshow with CSS3 CSS3 灯箱 Slopy Elements with CSS3 Item Blur Effec......

红薯
2012/01/11
2.6K
0
20 个卓越的 CSS3 Web表单教程

Clean and Stylish CSS3 Form More Information on Clean and Stylish CSS3 Form Create a Stylish Contact Form with HTML5 & CSS3 More Information on Create a Stylish Contact Form wit......

红薯
2011/08/06
3.6K
6
50 个最佳 CSS3 教程大放送

本文收集了2011年最热门的50个CSS3教程,读者可根据这些教程轻松实现网页的设计。 1. Original Hover Effects with CSS3 本教程讲述应用CSS3实现风格迥异的鼠标悬停效果。 2. CSS3 Transiti...

红薯
2011/11/23
3.5K
1
35个很棒的HTML5和CSS3教程

CSS3和HTML 5可以影响你设计网站的方式。CSS3提供了很多的设计上的新技术和高级功能,使创建网站变得更容易。下面的列表是今年最新的CSS3和HTML5的教程。 1. The Apple.com navigation menu...

小卒过河
2011/07/01
14.6K
6

没有更多内容

加载失败,请刷新页面

加载更多

Activity启动模式二

上篇文章Activity启动模式一主要介绍了Activity的四种启动模式,这些启动模式都是在AndroidManifest中进行配置的。除此之外,Android系统还通过Intent类提供了一些标志位,同样可以指定Activ...

ltlovezh
42分钟前
6
0
三原色还原

1、Color Filter Array — CFA 随着数码相机、手机的普及,CCD/CMOS 图像传感器近年来得到广泛的关注和应用。 图像传感器一般都采用一定的模式来采集图像数据,常用的有 BGR 模式和 CFA 模式...

天王盖地虎626
53分钟前
7
0
kubernetes pod exec接口调用

正文 一般生产环境上由于网络安全策略,大多数端口是不能为集群外部访问的。多个集群之间一般都是通过k8s的ApiServer组件提供的接口通信,如https://192.168.1.101:6443。所以在做云平台时,...

码农实战
今天
8
0
3_数组

3_数组

行者终成事
今天
8
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部