1、嵌套选择器

  • p{ }: 为所有 p 元素指定一个样式。（默认，，也就是说可以被改变样式）
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。（区别于第一种，必须有class属性地址<div class="marked"></div>
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。（<p class="marked">带下划线的 p 段落。</p>）
 <p>这个段落是蓝色文本，居中对齐。</p>

 <div class="marked">

 <p>这个段落不是蓝色文本。</p>

 </div>

 <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>

 <p class="marked">带下划线的 p 段落。</p>

2、块级元素和内联元素

块级元素(block)特性：

  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

  • address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

  • a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

  • applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

  • display:block  -- 显示为块级元素
  • display:inline  -- 显示为内联元素
  • display:inline-block -- 显示为内联块元素，表现为同行显示（内联元素）并可修改宽高内外边距等属性（块级元素）

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

3、光标

 <body>

 <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>

 <span style="cursor:auto">auto</span><br>

 <span style="cursor:crosshair">crosshair</span><br>

 <span style="cursor:default">default</span><br>

 <span style="cursor:e-resize">e-resize</span><br>

 <span style="cursor:help">help</span><br>

 <span style="cursor:move">move</span><br>

 <span style="cursor:n-resize">n-resize</span><br>

 <span style="cursor:ne-resize">ne-resize</span><br>

 <span style="cursor:nw-resize">nw-resize</span><br>

 <span style="cursor:pointer">pointer</span><br>

 <span style="cursor:progress">progress</span><br>

 <span style="cursor:s-resize">s-resize</span><br>

 <span style="cursor:se-resize">se-resize</span><br>

 <span style="cursor:sw-resize">sw-resize</span><br>

 <span style="cursor:text">text</span><br>

 <span style="cursor:w-resize">w-resize</span><br>

 <span style="cursor:wait">wait</span><br>

 </body>

4、布局-overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

4-21 嵌套选择器 、块级元素和内联元素、光标、布局-overflow的更多相关文章

  1. CSS--基础块级元素与内联元素

    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素.在HTML和XHTML中,块级元素不能继承自行内元素(即不能嵌套在行内元素),<p&g ...

  2. HTML块元素与内联元素嵌套规则

    HTML存在许多种类型的标签,有的标签下面只允许特定的标签存在,这就叫HTML嵌套规则.不按HTML嵌套规则写,浏览器就不会正确解析,会将不符合嵌套规则的节点放到目标节点的下面,或者变成纯文本.关于H ...

  3. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  4. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  5. html块级元素和内联元素小结

    Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...

  6. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  7. CSS文档流与块级元素和内联元素（文档）

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  8. （转） html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  9. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

随机推荐

  1. 【原创】Linux系统不能上互联网情况下软件更新安装方法

    实际工作中,遇到了Linux 服务器在一台被隔离互联网的PC服务器上运行,使用Virtual Box,在解决此Linux更新的问题上,自己尝试了如下几种策略: 1.将DVD安装盘作为Linux更新源, ...

  2. PHP URL安全的Base64位编码

    先将内容编码成Base64结果; 将结果中的加号”+”替换成中划线“-“; 将结果中的斜杠”/”替换成下划线”_”; 将结果中尾部的“=”号全部保留; 实现 编码 function urlsafe_b ...

  3. Python课程第四天作业

    1.定义一个函数,该函数可以实现控制台输入,最终返回一个int类型的正整数 def chr_to_int(): user_input = input('请输您要转换的字符串:') if user_in ...

  4. 基础总结（04）-- display:none;&&visibility:hidden;区别

    display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...

  5. Django基础模型层(77-78)

    jango框架之模型层(d77-78)一 单表操作: 1 mysql数据库:settings里配置  'default': {   # key值必须都是大写   'ENGINE': 'django.d ...

  6. jmeter联合selenium webdriver进行自动化测试-简单1

    jmeter进行webdriver测试 背景:jmeter可以联合selenium进行基本的UI自动化进行测试,解放了手工测试的压力.那么selenium webdriver完成GUI的流程初步如下 ...

  7. JAVA图片验证码（转自“云在青山”）

    首先创建一个生成图片的类,设置一些请求参数,生成随机的字符串,然后字符串传给生成验证码图片的类进行处理,完成后输出到页面 1.创建验证码生成类 package hh.com.util; import ...

  8. jQuery 正则数字验证、’Money验证、电话号码验证、身份证验证、邮箱验证、网址验证、敏感字符验证

    jQuery只能输入数字 第一种写法: <input onkeyup="value=value.replace(/[^\d]/g,'')" /> 第二种写法: < ...

  9. 使用NPM安装Vue项目

    使用NPM安装Vue项目步骤如下: 一.先安装node.js,下载node.js安装包,node.js安装成功之后,左击电脑左下角>运行>输入cmd,如下图所示: 二.点击确定进入,分别在 ...

  10. DLC 基本逻辑运算

    逻辑代数:分析设计数字电路的数学基础是逻辑代数 变量的取值只能是 0 1 逻辑代数中只有三种基本逻辑运算,即 与 或 非 与逻辑运算: 只有决定一件事情的全部条件都具备时,这事件才成立.这样的因果关系 ...