1.css基本语法.txt

标签：分割   book   测量   input   服务   rom   文本域   边框   偶数   

*测量li的高 是量字的头--到底下边框. *测量边框border 从框框里面开始量,不要量到边框了;‘ *测量行高是文字 底部到底部 或者 头部到头部 *导航栏最好不要给宽度(因为导航文字会变),最好用padding撑开; *浮动和定位转换了行内块;(会继承行高),所以要自己设置 list-height; *overflow: hidden;子盒子要是使用marin-top吧父盒子带下来,可以给父盒子设置,overflow:hedden; -moz-:代表火狐浏览器私有属性; -ms-:代表ie浏览器私有属性; -webkit-:代表safari,chrome私有属性; -o-:代表Opera私有属性;

优先级: !important;

居中自适应: .w{ width: 1200px; /排版居中自己适应,可以嵌套在class里面,随时调用,/ margin: auto; }

使用方法:

方法一.如果父div和子div同一个宽,一定在class="同时调用,空格隔开" //这样可以直接给一个盒子设置属性 方法二.如果父div和子dic不是同一个宽,就在父div里嵌套一个class="w"的div //这样需要给两个个盒子设置属性 方法一:

方法二:

css默认事件公共样式:****

• { margin: 0px; padding:0px; /box-sizing: border-box;/ } input { outline: none;/取消轮廓线/ }

li { list-style: none; list-style-type:符号名称 //针对单行显示 }

a{ text-decoration: none; }

盒子box专区: box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3);//盒子阴影

默认模型: box-sizing:content-box; 在宽度和高度之外绘制元素的内边距和边框

css3盒子模型: box-sizing:border-box; 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

最高级清除浮动: //父级别没有高度 子级别就要浮动了;父亲就要清除浮动,不然会出现问题或者一条线 .clearfix:after{ content:""; display:block; height:0px; visibility:hidden; overflow:hidden; clear:both; } .clearfix{ zoom:1 /专门清理ie6-ie7浏览器*/ }

定位position: //(保留原来位置)占有位置 *子绝父相 *(right:0)从右边开始--用于轮播图右侧点击* 1.position-relative;相对定位 *相对于自己原来在标准流中位置来移动的* *原来在标准流的区域继续占有,后面的盒子任然以标准流的方式对待它;

2.position-absolute;绝对定位 //(不保留原来位置)脱标,不占有位置 *如果 父级 没有定位以浏览器移动位置 *如果 父级 有定位以父级移动位置 绝对定位的盒子,不用转换为display-back;可以直接设置宽高;***

3.position-fixed;固定定位/(不保留原来位置)脱标,不占有位置 跟父元素没有任何关系;单独使用 不随滚动条滚动`

定位的盒子通常要给宽度;

z-index:正数在上面,负数在下面;

position-absolute定位居中: 1.水平居中:left:50%;**margin-left:(负数)自己宽度一半(定位的盒子)** left:0直接在左边开始 2.垂直居中??50%;***margin-top:(负数)自己高度一半(定位的盒子) right:0直接在右边开始

position-fixed居中: //贴着版心的左边 1.left:50%,margin-left:版心的一半(600) + 自己盒子的宽度(180) = (-780)//贴着版心最左边

display专区: display:inline-block; //行内块不给width,默认宽度就是内容的宽度 display:none://隐藏不占位置 display:block//显示

visibility专区: visibility:hidden;//隐藏,保留位置; visibility:visible//显示

overflow溢出: overflow: hidden;超出后影藏; overflow: scroll;显示滚动条; overflow: auto;超出显示滚动条,没超出不显示;

溢出文字显示省略号...://搭配overflow使用 white-space: nowrap; 强行成一行 overflow: hidden; 超出部分隐藏 text-overflow:ellipsis;用省略号...代替隐藏

字体专区: font-weight: bold; 加粗 font-weight:normal; 去加粗 font-weight:400; 去加粗

text专区: text-indent:首行缩进;em单位

list-style:专区: list-style-type: ; list-style-position: ; //等同于 list-style:decimal inside ;/显示数字样式,显示在ol 里面/

line-heigh行高: 行高=高:垂直居中; 行高高:文字偏上; 行高高:文字偏下;

盒子模型: **盒子模型是 marging+border+padding+宽度=等于总体盒子大小***

marddin外边距: 如果给ul设置了,margin-top没有反应就是,margin塌陷的问题 overflow:hidden.解决塌陷问题;

padding内边距: 没有宽度的盒子,padding 不会撑开盒子. 有高度或者的盒子,padding会撑开.//这样就要改高度**总高度-撑开的=等于剩下设置的宽度;

列表专区: dl>dt(标题)|dd //通常用于有标题的垂直的列表,dt:是标题;dd是标题下面的文字

border专区: border:0 去除边框(button) 圆角专区: border-radius:左上角 右上角 右下角 左下角;

input专区: input输入框 value关键字 button按钮

outline框框线: outline:none; //取消轮廓线,一般用于input

textarea文本域 //通常用于留言 resize:none; //防止用户拖拽文本域

伪元素选择器:****** ::after 在元素内部的 前面 插入内容(一版用于分割线 | ) ::before 在元素内部的 后面 插入内容 **图标字体:content:"\ea50"

nth-child(n): 1.可以是数字, 2.关键字 even偶数,odd奇数 3.公式: 2n 偶数 2n+1 奇数 5n 5 10 15 n+5 从第五个开始 -n+5 前五个开始

利用 ::before ::after 伪类，动态的在元素开始和末尾增加标签这一特性， 我们可以做出很多丰富的样式而且又减少了 DOM 的复杂度， 当然它还有更多更丰富的用法等待着我们来挖掘。

属性选择器: [attribute] 用于选取带有指定属性的元素。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。

background专区: background: red url(../img/banner.jpg) no-repeat top center //图片在red的上面,red不会被盖住,,,如果分开的话背景色会被图片盖住.

列子: { 背景色会被盖住: background: red; background: url(../img/banner.jpg) no-repeat top center 背景色不会被盖住: background: red url(../img/banner.jpg) no-repeat top center(图片朝上居中) }

background: rgba(0,0,0,.3) url("img/bf-logo.png")no-repeat center center; /透明度要和背景图片一起写,分开写不显示/

background:repeat-x //横向平铺;

background:url(‘../images/t_book.gif‘) no-repeat; 等同于 background-image:url(‘../images/t_book.gif‘);//只能放图片 background-repeat:no-repeat;

图片自适应: //缩放图片; background-size:100% 100%;

3.背景缩放: 3.1background-size: 500px 500px;//宽高; 3.2background-size: 50% //根据父盒子来改变; 3.3background-size:cover;等比例拉伸,完全覆盖div 3.4background-size:contain;//高度和宽度等比拉伸,当宽或高拉满就不拉了;

img动画专区: vertical-align: -3px; /*/可以用个数值 vertical-align: middle; img垂直居中: //用于行内块 border-radius: 50px; 图片成圆形 transition:all 0.5s; css3动画改便,动画的过渡效果,一般配合伪类

vaertical垂直居中: //行内块才能使用 vaertical-align:top //顶部对齐 可以去除图片顶部空白东西 vaertical-align:middle //垂直居中*通常用于img后面添加文字,垂直居中!!! vaertical-align:baseline //基线对齐

transition过渡专区: //过渡写在div身上 transition:要过度的属性 花费时间 运动曲线 何时开始; transition: all 0.5s; //all所有属性都会变化 ,简写

伪类动画专区: transform: rotate(360deg); 鼠标触摸之后旋转div360度 transform: translateY(-10px); /鼠标触摸之后,像y轴移动-10px/ transform: scale(1.5); //触碰放大 transform-origin: left bottom; //方位名词,可以是 50%,可以是

transform: transform:translate(x,y)

鼠标样式cursor: cursor:default 小白样式 cursor:pointer 小手样式 cursor:not-allowed 禁止

CSS精灵技术: 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度;

使用方法: 称号:Sprites,雪碧图 (fw软件) 1.先切片,测量宽高 2.设置width,height; 3.看位置(x为负数,y为负数) 4.设置坐标 background-position:url(0,0); 位置是:雪碧图找选中的图!!!(先左后右) -x,-y;

制作方法: ps--新建一个 分辨率为72,颜色模式为RGB(8位),背景色(白色) 保存:要取消背景色;保存为透明的;存储为png格式

微信阀动门导航: //好处是阀门可以自动适应文字的长度 //weixin.qq.com 案例:

注意: 不给宽,只给高; a和span: display: inline-block; a控制左边的图,span控制右边的图(记得,添加riht)

css写三角形效果: 1.宽高度为0;

2.width: 0; height: 0; border-style: solid; border-width: 10px; border-color: red transparent transparent transparent;//上右下左, font-size: 0; //透明色 line-height:0;

1.css基本语法.txt

标签：分割   book   测量   input   服务   rom   文本域   边框   偶数   

原文地址：https://www.cnblogs.com/cl1998/p/12688776.html