分组和嵌套 

分组选择器

——————>  

嵌套选择器

能适用于选择器内部的选择器的样式

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

尺寸

控制高宽

增加行间距

Display显示与Visiblity可见性

display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。

隐藏元素

  • 块元素是一个元素,占用了全部宽度,在前后都是换行符【如<p> <h1> <div>】
  • 内联元素只需要必要的宽度,不强制换行【如<a> <span>】

内敛元素和块元素的相互转换

li {display:inline;}  //变为内敛
span {display:block;}   //变为块

内敛和块的特性

visibility属性

position定位

sticky粘性定位效果

——————> 

重叠的元素————z-index指定堆叠顺序

定位属性

注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时,IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是 <div class="container">)设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时,请始终设置 !DOCTYPE 声明

overflow

控制内容溢出元素框时显示的方式

添加滚动条

元素溢出元素框【显示在外面】

 float浮动

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

彼此相邻的浮动

——————>   

清除浮动

clear 属性指定元素两侧不能出现浮动元素

CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动的更多相关文章

  1. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  2. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  3. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  4. css 样式设计(一)( 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 )

    一.css在线150个例子 http://www.w3cschool.cc/css/css-examples.html 二.背景图片水平方向重复 : body { background-image:u ...

  5. CSS:使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  6. 超赞的CSS3进度条 可以随进度显示不同颜色

    原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...

  7. 【总结整理】display与position之间的关系【较完整】(转)

    display与position之间的关系   以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的 ...

  8. 6.bootstrap 将文本内容关联一个动作(手机端导航适配)&在超小尺寸下显示,屏幕变大后消失

    1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...

  9. display与position之间的关系

    以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式 ...

随机推荐

  1. Gcd HDU - 6545 (基础数论)

    wls 有一个整数 n,他想将 1 − n 这 n 个数字分成两组,每一组至少有一个数,并且使得两组数字的和的最大公约数最大,请输出最大的最大公约数. Input 输入一行一个整数 n. 2 ≤ n ...

  2. POSTGRESQL 批量权限 管理方法

    原博地址 https://yq.aliyun.com/articles/41512?spm=a2c4e.11153940.0.0.20b7640fcDiFQA 关于PostgreSQL的逻辑架构和权限 ...

  3. 七、设备驱动中的阻塞与非阻塞 IO(二)

    7.2 轮询 7.2.1 介绍 在用户程序中的 select() 和 poll() 函数最终会使设备驱动中的 poll() 函数被执行. 设备驱动程序中的轮询函数原型: /** 用于询问设备是否可以非 ...

  4. 上传大文件(100G)的解决方案

    4GB以上超大文件上传和断点续传服务器的实现 随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求. 但是在很多情况下,平台运营方并没有大文件上 ...

  5. 'gbk' codec can't decode byte 0xad in position 12: illegal multibyte sequence

    原文链接:https://blog.csdn.net/shijing_0214/article/details/51971734 使用python的时候,经常会遇到文本编码的问题,其中最常见的就是“' ...

  6. VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers

    数组 错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错 正确的写法:let listDate= state.playList.slice(); ...

  7. 19. ClustrixDB 执行计划解读

    EXPLAIN语句用于显示ClustrixDB查询优化器(也称为Sierra)如何执行INSERT.SELECT.UPDATE和DELETE语句.EXPLAIN的输出有三列: Operation - ...

  8. DataGrip连接阿里云的MySQL

    参考:https://www.cnblogs.com/i6010/articles/7723503.html 第一步:在/etc/mysql/my.cnf下找到bind-address = 127.0 ...

  9. JPA学习(二、JPA_基本注解)

    框架学习之JPA(二) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...

  10. 2018山东省赛 H Dominoes ( 搜索 )

    题目链接 题意 : 给出一个 n * m 的矩阵,用规格 1 * 2 的多米诺去填充,题目数据保证最后只有一个格子是空白的(即没有被多米诺骨牌覆盖),问你现在通过移动多米诺能够产生多少种不同的状态(空 ...