margin介绍及网页规划思路

15 篇文章 0 订阅
13 篇文章 0 订阅

MARGIN

margin用法 (外边距、边界)
1:margin在元素外围,不会撑大元素的大小
2:作用:控制元素与元素之间的间距。
3:给单一方向添加margin
margin-left/right/top/bottom
4 :margin设置方法:
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5:margin:0 auto;
让当前元素在父元素里面左右居中。
6:margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margin-top,会错误放在父元素上面。

盒子大小计算

盒子在网页中占有的真实空间:
占有的宽度:width+padding-left/right+border-left/right+margin-left/right
占有的高度:height+padding-top/bottom+border-top/bottom+margin-top/bottom
在这里插入图片描述
在这里插入图片描述

网页规划

1.元素的命名

a.划分外围结构:id选用驼峰式命名法或者语义化。
eg:newsLeft/news
b.版心的命名:连字符命名法。
eg:news-con
内容版快的命名:下划线命名法。
eg:news_left

2.css外部样式表

1.网页尽可能地使用外部样式表。
2.每一个页面都需要有属于自己的样式表。
3.每一个网站都拥有公共样式。
4.每一个网站至少拥有一个重置样式的样式表用来清除所有默认样式。

3.css外部样式表命名示例

index.css(首页样式表)
public.css(公共样式表)
reset.css(重置样式表)
外部样式表首行:1.@charset"utf-8";
首行说明:用来声明样式表所使用的语言。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值