css知识点-《CSS世界》

最新推荐文章于 2024-07-20 15:40:46 发布

Merryhyl

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量240

点赞数

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/Merryhyl/article/details/108662378

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css选择器
a.类选择器：类似‘.’开头的选择器，很多元素可以用同一个类选择器
b.ID选择器：类似‘#’开头的选择器，ID一般指向唯一元素
c.属性选择器：指含有[]的选择器，如：[title]{},[title=“custom”]{},[title~=“custom”]{},[title^=“custom”]{},[title$=“custom”]{}
d.伪类选择器：指前面有英文冒号:的选择器，如：:first-child,last-child
e:伪元素选择器：指连续两个冒号::的选择器，如：::before ,::after
关系选择器
a.后代选择器：空格连接，选择所有符合规则的后代元素
b.相邻后代选择器（子选择器）：>连接，选择符合规则的儿子元素，孙子、重孙子元素忽略
c.兄弟选择器：~连接，选择当前元素后面的所有符合规则的兄弟元素
d.相邻兄弟选择器：+连接，仅仅选择当前元素相邻的那个符合规则的元素
css content 换行实现loading效果

<div> 正在加载<dot>...</dot> </div>   
<style>
		dot{
			display: inline-block;
			vertical-align: -.25em;
			height: 1em;
			line-height: 1;
			overflow: hidden;
		}
		dot::before{
			display: block;
			content :'...\A..\A.';
			white-space: pre-wrap;
			animation: dot 3s infinite step-start both;
		}
		@keyframes dot{
			33% {transform: translateY(-2em);}
			66% {transform: translateY(-1em);}
		}
</style>

content attr属性值内容生成

   <img alt="http://123.com" src="" >
   <style>
      img::after{
		 content : attr(alt);
	  }
   </style>

content 计算器
counter-reset ：计数器-重置（主要给计数器起个名字，顺便指定从哪个数字开始计数，默认是0；可以多个计数器同时命名，用空格隔开）

xxx:{counter-reset:xiaoer 2 xiaosi 3}

counter-increment：计数器-递增，值为counter-reset 后面跟随的数字，表示每次计数的变化值 css世界示例1-13

<p>我本名王小二，万万没想到，我现在居然成了王小...</p>
<p class="counter"></p>
<style>
.counter {
  counter-reset: wangxiaoer 2; 
  counter-increment: wangxiaoer;
  font-size: 32px; 
  font-family: Arial black; 
  color: #cd0000; 
}
.counter:before { 
  content: counter(wangxiaoer); 
}
</style>

方法counter()/counters():显示计数

用法：counter(name) // name 是counter-reset 的名称
counter(name , style) // style 支持的关键字值是list-style-type支持的那些值。作用是，递增递减不一定是数字，还可以是英文字母或罗马文等
list-style-type:disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | none | inherit
counter支持级联，一个content属性值可以有多个counter()方法

.counter {
   counter-reset: wangxiaoer 2 wangxiaosan 3; 
}
.counter:before { 
   content: counter(wangxiaoer) '\A' counter(wangxiaosan); 
   counter-increment: wangxiaoer 2
}

counters 基本用法
counters(name,string) //string 是字符串(需要引号包围，是必须参数)，表示子序号连接的字符串，例如 1.1的string是’.’,1-1的string是’-’

通过子辈对父辈的counter-reset重置，结合counters()方法实现计数嵌套效果

<div class="reset">
	<div class="counter">我是王小二
		<div class="reset">
			<div class="counter">我是王小二的大儿子</div>
			<div class="counter">我是王小二的二儿子
				<div class="reset">
					<div class="counter">我是王小二的二儿子的大儿子</div>
				</div>
			</div>
			<div class="counter">我是王小二的三儿子</div>
		</div>
	</div>
	<div class="counter">我是王小三
		<div class="reset">
			<div class="counter">我是王小三的儿子</div>
		</div>
	</div>
	<div class="counter">我是王小四</div>
</div>
<style>
.reset{
	padding-left: 20px; 
	counter-reset: wangxiaoer ;	
}
.counter:before {
	counter-increment: wangxiaoer;
	content: counters(wangxiaoer,'-')'. ';
}
</style>

quotes 属性：指定open-quote,close-quote 字符具体是什么

<p lang="ch"><q>这本书很赞！</q></p>
<p lang="en"><q>This book is very good!</q></p>
<p lang="no"><q>css世界</q></p>
<style>
       /*为不同语言指定引号的表现*/
  		:lang(ch)>q{quotes: '“' '”';}
		:lang(en)>q{quotes: '"' '"';}
		:lang(no)>q{quotes: '《' '》';}
		/*在q标签前后插入引号*/
		q:after{content:close-quote}
		q:before{content:open-quote}
</style>

padding 属性和background-clip属性绘制图形

<i class="icon-main"></i>
<i class="icon-dot"></i>
<style>
  .icon-menu{
	display: inline-block;
	width:100px;height:10px;
	padding: 35px 0;
	border-top:10px solid;
	border-bottom: 10px solid;
	background-color:currentcolor;
	background-clip: content-box;
}
.icon-dot{
	display: inline-block;
	width:100px;height:100px;
	padding: 10px;
	border-radius: 50%;
	border:10px solid;
	background-color:currentcolor;
	background-clip: content-box;
}
</style>

border-color默认颜色就是color色值
使用border 实现三角形

{
    width: 0px;
    border: 10px solid;
    border-color: #f30 transparent transparent;
}

line-height：默认值是normal，还支持数值、百分比和长度值
不同系统不同浏览器的默认line-height 是有差异的；
a).数值：line-height:1.5，最终计算值是和当前font-size相乘后的值
如：font-size:14px，则 line-height计算值是1.5 * 14px = 21px
b).百分比值：line-height:150%，最终计算值是和当前font-size相乘后的值
如：font-size:14px ，则line-height计算值是150% * 14px =21px
c).长度值：line-height:21px 或者line-height:1.5em;此处em是一个相对于font-size的相对单位，因此line-height:1.5em最终的计算值也是和当前font-size相乘后的值
如：font-size:14px , line-height:1.5em ，则line-height的计算值是 1.5 * 14px = 21px
注：line-height:1.5 与 line-height:150% ； line-height:1.5em两个的继承关系不同；使用数值作为line-height的属性值，那么所有的子元素都继承这个值；如果使用百分比值和长度值作为属性值，那么所有的子元素继承的是最终的计算值

<div class="box box-1">
    <h3>标题</h3>
    <p>内容</p>
</div>
<div class="box box-2">
    <h3>标题</h3>
    <p>内容</p>
</div>
<div class="box box-3">
    <h3>标题</h3>
    <p>内容</p>
</div>
<style>
  .box   { font-size: 14px; }
  .box-1 { line-height: 1.5; }
  .box-2 { line-height: 150%; }
  .box-3 { line-height: 1.5em; }

  h3, p { margin: 0;}
  h3 { font-size: 32px; }
  p  { font-size: 20px; }
</style>

11.vertical-align属性值有4类：

线类，如baseline（默认值）、top、bottom、middle
文本类，如text-top、text-bottom
上标下标类，如sub、super
数值百分比类，如20px、2em、20%，百分比值相对于line-height计算

vertical-align 的默认值是 baseline（基线对齐）,基线的定义是字母 x 的下边缘。因此,内联元素默认都是沿着字母 x 的下边缘对齐的。对于图片等替换元素,往往使用元素本身的下边缘作为基线。中文和部分英文字形的下边缘要低于字母X的下边缘，会给人感觉文字偏下，一般会进行调整（可用vertical-align 的数值百分比类属性调整）。
vertical-align属性只能作用在display计算值为inline、inline-block、inline-table、table-cell的元素上，默认情况下，span、strong、em等内联元素，img、button、input等替换元素，非HTML规范的自定义标签元素、及td单元格，都是支持vertical-align属性的，其他块级元素不支持

浮动和绝对定位会让元素块状化

.example{
   float:left;
   vertical-align:middle /*没有作用*/
 }
.example{
   position:absoute; 
   vertical-align:middle /*没有作用*/
 }

<div class="box">
 <img src="" />
</div>
.box{
  height:128px;
}
.box>img{
  height:96px;
  vertical-align:middle 
}
此时，vertical-align:middle 没有起作用；原因是行框盒子前面的“幽灵空白节点”高度太小；
通过设置足够大的行高让“幽灵空白节点”高度足够，vertical-align:middle 就会起作用

.box{
  height:128px;
  line-height:128px /*关键css属性*/
}
.box>img{
  height:96px;
  vertical-align:middle 
}

table-cell元素设置 vertical-align垂直对齐的是子元素，但是起作用的并不是子元素，
而是table-cell元素自身

.cell{
  height:128px;
  display:table-cell /*关键css属性*/
}
.cell>img{
  height:96px;
  vertical-align:middle 
}

图片并没有垂直，将vertical-align:middle 设置在table-cell元素上

.cell{
  height:128px;
  display:table-cell; /*关键css属性*/
  vertical-align:middle 
}
.cell>img{
  height:96px;
}

Merryhyl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css知识点-《CSS世界》

css选择器a.类选择器：类似’.‘开头的选择器，很多元素可以用同一个类选择器b.ID选择器：类似’#'开头的选择器，ID一般指向唯一元素c.属性选择器：指含有[]的选择器，如：[title]{},[title=“custom”]{},[title~=“custom”]{},[title^=“custom”]{},[title$=“custom”]{}d.伪类选择器：指前面有英文冒号:的选择器，如：:first-child,last-childe:伪元素选择器：指连续两个冒号::的选择器，如：..
复制链接

扫一扫

专栏目录