2020.3.24.第六天

<!--  

padding的用法:

1: padding是长在内容和盒子之间的,在盒子内部。

2:padding是为了调整 子元素 在 父元素里面位置关系。

3:padding的特点:padding值会把盒子撑大。

4:如果想让盒子保持原有大小,需要在宽高的基础上减掉padding值。

5:给单一方向设置padding值:

            padding-left/right/top/bottom:;

6: padding设置方法:

padding:1个值      四周

padding:2个值      上下   左右

padding:3个值      上     左右    下

padding:4个值      上右下左


7: padding不能设置负值

8: padding不会对背景图造成影响。

9:如果一个盒子没有设置固定的宽和高,添加padding是不用减的。

-->


<!--  

    margin:

1: margin长在元素之外的。

2: margin控制的是 同级元素 之间的位置关系。

3: margin不会对盒子本身的宽高造成影响。

4:给单一方向添加margin值

            margin-left/right/bottom/top:;


5: margin的设置方法:

margin:1个值      四周

margin:2个值      上下   左右

margin:3个值      上     左右    下

margin:4个值      上右下左


6: margin可以设置负值。

7: margin常出现的BUG:

a:当父元素和第一个子元素都没有设置浮动的情况下,如果给第一个子元素添加margin-top  会错误的把margin-top加在父元素上面。

b:上下相邻两个元素之间的margin值,不会叠加,按照最大值去设置。


8: margin:0 auto;让当前元素在父元素里面左右居中。

-->

<!--  

规划:

元素命名:

id划分外围结构  ->  id选用驼峰式命名法 || 语义化news/case。

版心的命名->连字符命名法    news-wrap

内部内容块的命名->下划线       news_left  /  news_right


css外部样式表:

1:每个页面都需要属于自己的样式表。

2:一个网站,都拥有公共样式表。

3:重置样式的样式表。(清除所有默认样式)


注:如果版心两侧没有颜色平铺,可以直接写版心区域。

-->

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    繁华退却阅读 1,772评论 0 0
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,666评论 0 6
  • 什么是盒子? CSS处理网页时,它认为每个元素都包含在一 个不可见的盒子里。 我们只需要将相应的盒子摆放到网页中相...
    咻咻咻滴赵大妞阅读 946评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,406评论 0 7
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,917评论 0 6