pink老师htmlcss3
用这个形式记录只为了错了能随时更正。
-
亲儿子标签
只管亲儿子一级的元素,不管后代。 -
图片适应盒子大小
width:100% -
p269 布局技巧 文字围绕浮动元素巧妙运用。
浮动的本质是做文字围绕效果浮动不会压住文字可以利用这个特性 做出想要的效果 -
上下排列用标准盒子,左右排列用浮动。
一大堆盒子的时候建议用ul li套盒子。不浮动就再给li加浮动。注意可以去掉li自带的小·。
做一排超链接的时候也建议用 ul li 加浮动 -
随时记得清除内外边距
*{
margin:0
padding:0} -
如果一个盒子添加了text-align:center
那么所有的行内元素和行内块元素都会水平居中对齐 -
垂直居中就让line-height 和height相等
-
超链接不要下划线
text-decoration:none -
vsCode技巧
拉下的同时输入文字可以搞出一列来
比如写超链接#的时候 -
只有行内块元素 或 块级元素才有大小
可以转换行内块元素display:inline-block
比如想把超链接做成行内块的时候可以灵活运用
只要给父亲添加text-align那么所有子盒子也会水平居中
上一页prev <
下一页next >
p271三角强化(直角三角形)
制作梯形盒子
width0
height0
上边框宽度调大
boder-top:100px solid transpraent;
boder-right:50px solid 颜色
左边和下边的边框宽度设置0
boder-bottom:0 solid.颜色
boder-left:0 solid 颜色
有简写
绝对定位
-
font-weight 400/700
-
vertical-align:middle取消图片底侧有空白缝隙的问题
-
font:12px/1.5 所有文字大小是12号1.5倍行高
-
webkit-font-smoothing:antialised;
抗锯齿性 -
加了绝对定位的盒子可以直接给宽度和高度
-
box-sizing:border-box
p313 是css3盒子模型的写法。不用担心padding撑大盒子。
盒子大小为weitht。这句是哪一集出现的忘记了。 -
是空格
-
登陆和注册一般放到一个盒子里 相关性
-
comoon.css公共部分调用 class=“xxxx”
-
垂直居中的line-height会继承
-
盒子里面字数不同的话,千万不要给小li宽度,自然撑开。
-
p307 每个盒子中间都有一个小竖线
可以给竖线左右magin值,就可以自然呈现盒子与盒子之间的距离。
如果是偶数的话,可以用盒子包含ul li 偶数 结构伪类:nth-child(even)
span不可以做竖线 -
p314行内元素给左右的margin值是没问题的。
a超链接是行内元素。可以用margin:0 10px制造隔开的视觉效果。 -
清除li前面的小圆点:list-style: none (这个参数要放在ul里面修饰)
-
transform: translate(x,y)
添加链接描述
transform:translate(-50%,-50%)
当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。