WEB零基础开发-代码入门

一、      边框

1、        组成:粗细、样式、颜色

2、        方向:top、right、bottom、left

3、        特征:形状是非矩形

4、        边框三角形:  div{

width: 0;

                  height: 0;

                  border: 10px solid #fff;

                  border-top-color:#ccc;

}

二、      背景

1、        内容是会撑开容器的宽高;背景不会占用容器的宽高

2、        background-attachment 背景图是否滚动;

fixed:固定在浏览器可视区域;

scroll:跟随滚动条滚动;

3、        background 复合样式不分属性书写顺序

三、      文字文本

1、        font-weight:bold/normal;文字加粗

font-style:italic/normal;文字倾斜

font-size:文字大小

2、        font复合样式需要注意书写顺序

3、        text-align:left/center/right;文本对齐方式

text-decoration:underline/none;文本修饰

letter-spacing:字母间距(中文是一个字与一个字之间的间距,英文是一个字母与一个字母之间的间距)

4、        word-spacing:单词间距(以空格为解析单位)中文是每个字之间要有空格,英文是每个单词之间有空格

5、        white-space:nowrap/normal;强制不换行(就算文字超出了所设置的宽度,它也不会换行)

6、        测量文字大小的时候,最好是使用从上到下的方式去测量文字的大小

7、        空格的大小:字体格式为宋体时,空格的大小是当前文字大小的一半(字体格式不一样时,空格大小也不一样)

8、        text-indent:2em;缩进两个字体大小

em是根据字体大小来进行计算的;

1em = 当前字体大小

四、      盒模型

1、        padding:内填充;设置padding后会撑大容器的大小

2、        margin:外边距;元素与元素之间的距离

3、        margin的两个问题:

margin-top传递(当给子元素设置margin-top的值时,当子元素上面没有别的同级元素时,会将margin-top的值传递给父元素);解决方法:给子元素设置边框

margin上下叠压(上下两个元素分别设置了margin-bottom和margin-top值);解决技巧:还是使用margin,可以将某一个元素方向设置成预想的值,margin叠压会取最大的margin值;如果元素没有特许特征,也可以用padding代替

4、盒模型大小:border+paddig+width/height(border和padding要包括左和右/上和下)

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值