css布局模型清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：1、流动模型（F...
tr td:nth-child(2){background-color:gray; }就是tr当中的td的第二个td的属性tr:nth-child(2n+0){background-color:#F0F0F0; }这个是tr的2的倍数的使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：p:nth-child(3n+0) { background:#ff0000; }原文：http://www.cnblogs.com/zonglonglong/p/4832615.html
<ul class="icon-down-single-arr-li"><li> <a href="javascript:void(0)">价格<span class="icon-all icon-down-single-arr"></span></a> </li> </ul>对a链接包含的span图标进行样式更改。.icon-down-single-arr{background-position: -67px -974px; } .icon-down-single-arr-li li:hover .icon-down-single-arr{background-position: -81px -974px; }特别注意第二个css样式的写法。原文：http://blog.csdn.net/smy_y...
CSSS书写位置内嵌式<head><style type = "text/css">****</style> </head>外链式<写在head里><link rel="stylesheet" href="1.css">行内样式表<h1 >威武霸气</h1>三种写法特点内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）标签分类（显示样式)块元素...
p:nth-child(2)要满足两个条件，1：选择的是p元素的父元素的第二个子元素 2：选择的第二个子元素必须是p元素，如果不满足，则将不显示 p:nth-of-type(2)选择父元素下的第二个p元素原文：http://www.cnblogs.com/jingxinqiaodaima/p/6252711.html
效果图：html：<div class=‘site_bar‘>首页</div>css:.site_bar{ background-image : linear-gradient(red,red); background-position : center bottom; background-size : 0 2px; background-repeat : no-repeat; //这个属性不能少。 transition : .3s;}.site_bar:hover{ background-size : 100% 2px;}原文：https://www.cnblogs.com/zhucj/p/10072480.html
1、background 内置是一种CSS内置设计模式，支持在元素下显示图片HTML<!DOCTYPE html><html lang="en"> <head><title>Background Image</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="site.css" media="all" type="text/css" /> <link rel="stylesheet" href="page.css" media="all" type="text/css" /> <link...
借知乎的回答如下解释：首先，我想告诉你的是，如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。参考：https://www.zhihu.com/...
元素的类型通常分为： 块级元素 内联元素 内联块元素块级元素： 块级元素会占据一行的位置,它后面的元素内容会换行显示 块级元素里面可以放任何内容,主要用来布局。 常见的块级元素：div h1-h6 ul li ol li p table form行内元素：内联元素也叫行级元素它只占据他内容所占的位置,其它的内容在他后面显示，但是行级元素里面不能放块级元素 常见的行内元素：a b span i del元素类型的转换 通过样式转换行块级元素： display:none;...
使用CSS隐藏元素的方法很多，在这里简单总结一下：1、display:nonedisplay:none 应该是最常用的一种隐藏元素的方法，使用该方法隐藏的元素脱离文档流不占据空间，不会被浏览器解析，不能点击，搜索引擎可能会认为被隐藏的文字属于垃圾信息而被忽略，而且屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。 2、visibility:hidden使用 visibility:hidden 隐藏的元素，不能点击，但是会占据文档空间，不...
转自https://blog.csdn.net/qq_40024178/article/details/78945651一.概述cssSelector也是一种常用的选择器，CSS locator比XPath locator速度快,用CSS Selector能非常精准的定位到想测试的Elements二.cssSelector常用符号说明# 表示id. 表示class> 表示子元素，层级一个空格也表示一个子元素，但是所有的子元素相当于xpath中的相对路径三.cssSelector的常用用法#input 选择id为input的节点.Volvo 选择class为Volvo的节点div#radio>...
E:target 表示当前的URL片段的元素类型，这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkbox或radioE::after 生成内容在E元素后 E:not(s) 表示E元素不被匹配 E~F表示E元素毗邻的F元素E:first-line选中第一行文字E:first-letter选中第一个字E::selection 当文字被选中时触发效果【注意是双冒号】Content 属性：E:after 利用content属性在元素末尾添加内容E:before...
这里介绍实现元素垂直居中的方式，文章是参考了《css制作水平垂直居中对齐》这一篇文章。1.行高和高度实现这种方式实现单行垂直居中是很简单的，但是要保证元素内容是单行的，并且其高度是不变的，只要将“line-height”和“height”设置成一样的就可以了。这种方式局限性在于只有单行文本的元素才适用，多行元素是不适用的。html代码：<div class="vertical"><span>aaa</span>content </div>css代码： .vertical {height: ...
在页面和浏览器中，除了文字、图片、表格、表单等，还有很多各种各样的元素，在上篇博文中，小编主要简单的介绍了一下在CSS中如何设置表格和表单，今天小编主要简单介绍一下丰富的超链接特效、鼠标特效、页面滚动条。首先我们来看一张思维导图： 接着，小编会跟随上述思维导图的足迹，慢慢探寻，丰富的超链接特效中，我们首先来介绍动态超链接，我们来看一下例子的代码和运行的效果： 动态超链接<span styl...
body{ font-family: cursive; font-size: 14px; } .left{ width:150px; height: 50px; background: #fff; position: relative; margin: 50px 0 0 50px; line-height: 50px; text-align: center; border: 2px solid green; ...