发表于: 2018-09-02 21:44:06
1 829
今天完成的事情:今天做了任务7的其中两个页面,对于移动端自适应页面的布局更加熟悉了一些
明天计划的事情:明天继续做任务七的剩下页面
遇到的问题:再布置header的时候里面放了<img>,img的尺寸并不大,但是却撑大了header的高度
解决方法:img {display:block}
究其原因是因为自己偷懒,没有css样式初始化,以后还是加上规范的css样式初始化:
收获:今天对于盒模型概念加深了一层理解
给头部header这个大盒子设定width:100%,以及padding,里面的内容就横向超出了header
width:100%+padding自然就超出了屏幕,width=width(content),w3c的标准盒模型
解决方法:去掉header的padding,为了还原设计图,只能给两边的元素加margin了
任务六的深度思考:
1.去除inline-block间距有哪几种方法?
当我们使用inline-block 时,会出现空白间距问题。
但这些间距对我们的布局,或兼容性产生影响,我们需要去除它,该怎么办?下面简单介绍几种方法:
1.去掉html元素之间的空格,直接写在一行。
2.使用margin负值,通常可设置为margin:-4px
3.使用font-size:0。父元素设置为font-size:0,再把inline-block元素重新设置font-size;
4.使用float,不用inline-block
2.css有哪些属性可以继承?
1、字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
3、元素可见性:visibility
4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性:list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性:quotes
7、光标属性:cursor
8、页面样式属性:page、page-break-inside、windows、orphans
9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
评论