2021-01-10

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%，以使其居于中心位置。