css笔记

原创
2017/08/23 09:56
阅读数 47

css选择器

.nav li

选择.nav下的所有li

.nav>li

选择父元素为.nav的所有li

.nav li:first-child

选择.nav下的第一个li

.nav li:last-child

选择.nav下的最后一个li

.nav+.p

选择.nav元素之后紧跟的每个p元素

input[disabled] 或 input:disabled

选择带有disabled属性的input元素

input[type='text']

选择input的type属性为text的元素

input:focus

选择获得焦点的input元素

img[title~=flower]

选择title属性包含flower的img元素

a:link

选择所有未被访问的a元素

a:visited

选择所有已被访问的a元素

a:active

选择活动的a元素

a:hover

选择鼠标指针位于其上的链接

p:before

在每个p元素的内容之前插入新内容

p:after

在每个p元素的内容之后插入新内容

p :not(span)

选择p内非sapn的元素

h1::selection

选择h1元素被用户选取的部分

css的优先性

行内样式 > id样式 > class样式 > 标签名样式

行内样式是最优先的,然后其他设置的优先性,从低到高依次为:

div < .class < div.class < #id < div#id < #id.class < div#id.class

flex (弹性布局)

网页布局(layout)是 CSS 的一个重点应用。

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有现代浏览器的支持,这意味着,现在就能很安全地使用这项功能。

为容器设置flex布局

display: flex; 为块级元素设置弹性布局

display: inline-flex; 为行内元素设置弹性布局

display: -webkit-flex; webkit内核浏览器,必须加上-webkit前缀

注意:设为flex布局后,子元素float、clear、vertical-align属性将失效

flex容器属性

flex-direction:row | row-reverse | column | column-reverse; 决定主轴的方向(即项目的排列方向)

flex-wrap: nowrap | wrap | wrap-reverse; 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行

flex-flow: <flex-direction> || <flex-wrap>; flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

justify-content: flex-start | flex-end | center | space-between | space-around; justify-content属性定义了项目在主轴上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch; align-items属性定义项目在交叉轴上如何对齐。

align-content: flex-start | flex-end | center | space-between | space-around | stretch; align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex项目属性

order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大,如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

align-self: auto | flex-start | flex-end | center | baseline | stretch; 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

  • 参考

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

多行文本隐藏,显示省略号(只支持webkit)

.box{
	width:100%;
	height: 3em;
	overflow: hidden;
	text-overflow: ellipsis; 省略号“...”隐藏超出范围的文本 
	display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 
	-webkit-line-clamp: 2; 用于显示的行数
	-webkit-box-orient: vertical; 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
}

font简写

当我们写字体样式时,我们一般这样写

font-size: 1em; 
line-height: 1.5em; 
font-weight: bold; 
font-style: italic; 
font-variant: small-caps; 
font-family: verdana,serif 

简写方式如下

font: 1em/1.5em bold italic small-caps verdana,serif

position fixed 左右居中

width:400px;
position: fixed;
margin:0 auto;
left:0px;
right:0px;

position:fixed 左右上下垂直居中

width:400px;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

容器水平居中

div{width:1000px;margin:0px auto;}

文字水平居中

div{text-align:center}

文字垂直居中

div{height:35px;line-height:35px;}

水平垂直居中的6中方法

让.box内的span水平、垂直居中

<div class="box box1"><span>我是垂直居中元素</span></div>
<div class="box box2"><span>我是垂直居中元素</span></div>
<div class="box box3"><span>我是垂直居中元素</span></div>
<div class="box box4"><span>我是垂直居中元素</span></div>
<div class="box box5"><span>我是垂直居中元素</span></div>
<div class="box box6"><span>我是垂直居中元素</span></div>

先定义.box的样式

.box{width:500px;height:100px;background:#ccc;}

  • 方法一:dispaly:table-cell;

.box1{ text-align:center; display:table-cell; vertical-align:middle; }

  • 方法二:display:flex;

.box2{ display:flex; justify-content:center; align-items:center; }

  • 方法三:translate(-50%,-50%)

.box3{ position:relative; }

.box3 span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}

  • 方法四:display:inline-block

.box4{ text-align:center; font-size:0px; }

.box4 span{ vertical-align:middle;display:inline-block;}

.box4:after{ content:'';width:0;height:100%;display:inline-block;wertical-align:middle; }

  • 方法五:margin:auto

.box5{ display:flex;text-align:center;}

.box5 span{ margin:auto; }

  • 方法六: display:-webkit-box

.box6{ display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;text-align:center; }

透明度

.div{
	filter:alpha(opacity=50); 用于IE
	-moz-opacity:0.5; 用于firefox
	-khtml-opacity: 0.5; 用于webkit
	opacity: 0.5; 用于opera
}

css三角形

.div{
    border-color: transparent transparent green transparent; 
    border-style: solid; 
    border-width: 0px 300px 300px 300px; 
    height: 0px; 
    width: 0px; 
}

将元素的四个边框中的三个边框设为透明,剩下一个设为可见,就可以生成三角形效果了。

禁止自动换行

white-space:nowrap;

自动换行

word-wrap:break-word; word-break:normal;

强制换行

word-break:break-all

css提示框

当鼠标移动到链接上方时,会自动出现一个提示框

<a class="tooltip" href="#">链接文字 <span>提示文字</span></a>

css这样写

a.tooltip {position: relative} 
a.tooltip span {display:none; padding:5px; width:200px;} 
a.tooltip:hover span{display:inline; position:absolute;}

禁止用户选中文本

div {user-select:none;}

让元素的宽度、高度包含border和padding

box-sizing:border-box;

calc() 计算属性值

width:calc(100%-100px)

display属性

table 使该元素按table样式渲染

table-row 使该元素按tr样式渲染

table-cell 使该元素按td样式渲染

table-row-group 使该元素按tbody样式渲染

table-header-group 使该元素按thead样式渲染

table-footer-group 使该元素按tfoot样式渲染

table-caption 使该元素按caption样式渲染

table-column 使该元素按col样式渲染

table-column-group 使该元素按colgroup样式渲染

@font-family

首先定义一个Ionicons的字体,可以去ionicons.com下载

@font-face{
    font-family:"Ionicons";
    src:url("./fonts/ionicons.eot?v=2.0.1");
    src:url("./fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),
    url("./fonts/ionicons.ttf?v=2.0.1") format("truetype"),
    url("./fonts/ionicons.woff?v=2.0.1") format("woff"),
    url("./fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
    font-weight:normal;
    font-style:normal
}

使用方式

.demo{ font-family:"Ionicons" }
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部