!css 常见
css书写顺序，
优先级第一定位属性：position display float left top right bottom overflow clear z-index
优先级第二自身属性：width height padding border margin background
优先级第三文字样式：font-family font-size font-style font-weight font-varient color
优先级第四文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height
优先级第五css3中新增属性：content box-shadow border-radius transform……
作用：
减少浏览器reflow（回流），提升浏览器渲染dom的性能。
解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
构建render树：DOM树和CSS树合并之后形成的render树。
布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
css常见由继承的属性：
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为 大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
color：文本颜色
3、元素可见性：visibility
css常见不能被继承的属性：
1、display
2、盒子模型的属性:宽度、高度、内外边距、边框等
3、背景属性：背景图片、颜色、位置等
4、定位属性：浮动、清除浮动、定位position等
5、生成内容属性:content、counter-reset、counter-increment
6、轮廓样式属性:outline-style、outline-width、outline-color、outline
常见属性
//使用定位的形式，让其固定在某个地方 定义侧边栏、广告
<aside class="left">
p 标签的 align属性 "left" 让p标签的每行元素都左对齐
word-break: break-all; //单词自动换行 可拆分
word-break:keep-all; //单词不换行
word-wrap: break-word; //单词不被拆分 //一起使用互补
letter-spacing//字母（文字）间的间距
word-spacing;//空格（字）间距
resize: none（不可调）|both |horizontal （可调宽度）|vertical （可调高度）; //规定textarea用户可以调整尺寸
position:sticky;//粘性定位
//注意事项
//1.须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效
//2.设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效
//定义 自定义变量
：root{
--hee:50px
}
//使用自定义变量
.bgH{
height:var(--hee)
width:calc(var(--hee + 50px)) //运算符最好加空格 不然可能不起作用
}
文本超出显示…
//超出... 一行
text-overflow:ellipsis //文本超出部分用...代替
overflow:hidden;//前提是（超出部分隐藏）
white-space:nowrap;// （单词遇见空格不换行：不会换行）//空白不换行 只有br才能换行 （一段文字不会换行）
//多行行显示 超出部分... 在 -webkit-box，和移动端可以
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
/* -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
//兼容ie 的多行显示
p{
position: relative;
line-height: 20px;
max-height: 40px; //高度为行高的几倍就显示几行
overflow: hidden;
}
p::after{ //兼容ie8需要将::after替换成:after
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
/*
此方法有个弊端 那就是 【未超出行的情况下也会出现省略号】 ，这样会不会很挫！！！ 没办法，只能结合JS 进行优化该方法了。
//当内容超出4行是进行截取直到内容控制在4行内
if($('.text').height()>80){
while ($('.text').height()>80){//如果还是高于指定行数 就在此裁剪 内容 直至到行数
var content = $('.text').html().substr(0,$('.text').html().length-14);//裁剪数具体看情况而定
$('.text').html(content);
}
$('.text').append('<a href="http://www.baidu.com" style="margin-left:10px"> ...查看详情</a>');
}
//再次判断截取后的内容加上'...查看详情'后的最终内容是否超出4行,超出就再次截取 这次至获取文本的长度text()
if($('.text').height()>80){
content = $('.text').text().substr(0,$('.text').text().length-20);
$('.text').html(content);
$('.text').append('<a href="http://www.baidu.com">...查看详情</a>')
}
*/
input 的placeholder 的样式设置 和 图文复制
input::-webkit-input-placeholder {
/* placeholder颜色 */
color: #aab2bd;
/* placeholder字体大小 */
font-size: 12px;
/* placeholder位置 */
text-align: right;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size:14px;
color: #333;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size:14px;
color: #333;
}
//图文不能复制
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
box-shadow
box-shadow:第三个参数 模糊距离：值越大越模糊 第四个参数 模糊大小：值越大模糊宽度越大
box-shadow:-10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
table 布局
table 布局：做table页面时，有时对td设置的宽度是无效的，td的宽度始终有内部的内容撑开，可以设置padding，但直接设置width却无效
1 我们可以在td中加个div，然后给div设置宽度，来试一下：
<td width="100px" style="width: 100px !important;">1000800</td>
修改为
<td><div>1000800</div></td>
然后在样式里写入：
td div {
width:100px;
2 table-layout:fixed;列宽由表格宽度和列宽度设定。
flex
display:flex //项目为块级元素 //兼容IE 11
display: -webkit-flex; /** 如果想想兼容ie10 就要加这个前缀
//如果想要兼容ie10以下的版本 可以用flot 布局 及定位来实现
**/***/容器属性**
flex-direction：row |row-reverse| column|column-reverse：
flex-wrap：nowrap | wrap | wrap-reverse
flex-flow:以上俩简写
justify-content：flex-start | flex-end | center | space-between | space-around;定义了项目在主轴上的对齐方式。
align-items： flex-start | flex-end | center | baseline | stretch;属性定义项目在交叉轴上如何对齐。
（工作中一班为一根轴线） align-content：flex-start | flex-end | center | space-between | space-around | stretch; 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
**/****/项目属性**
order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis：定义了在分配多余空间之前 项目将占据固定空间
**/****/（ 对某个特定的项目进行排版） **/****/
▲▲▲align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
▲▲▲flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto flex-direction（row | row-reverse | column | column-reverse）
/*水平垂直居中方式*/
行内元素居中 父级块级元素设置： text-align：cneter line-height
块级元素居中
//在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。
方法一: 绝对定位方法：`不确定当前div的宽度和高度`，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）
div{
background:red;
position: absolute;
left:50%;
top:50%; /*让当前元素的左上角在父级的中心*/
transform: translate(-50%, -50%);/*让当前元素的中心在父级元素的中心*/
}
方法二: 绝对定位方法：`确定了当前div的宽度`，margin值为当前div宽度一半的负值
div{
width:600px;
height: 600px;
background:red;
position: absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-300px;
}
方法三：绝对定位方法：绝对定位下top left right bottom 都设置0
<div class="child">我是子级</div>
div.child{
width: 600px;
height: 600px;
background: red;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
方法四:flex布局方法(推荐)：`不确定和不确定当前div的宽度和高度`当前div的`父级`添加flex css样式
<div class="box">
<div class="child">child</div>
</div>
.box{
height:800px;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
border:1px solid #ccc;
}
div.child{
width:600px;
height:600px;
background-color:red;
}
方法五:table-cell实现水平垂直居中: table-cell middle center组合使用
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
解决外边距合并
父级元素设置
overflow: hidden;
padding-top: 1px;
&::before{
display: table;
content: "";
}
border-top:1px soild transparent
产生浮动原因：盒子里使用了浮动和结对定位等让元素脱离文档流
//解决高度坍塌 清除浮动
也是在父级元素
&:after{
dsiplay:block;
content:"";
clear:both;
height:0,
}
版权声明：本文为axzzy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。