zoukankan      html  css  js  c++  java
  • css布局课件

    1.什么是CSS盒模型

    我们的网页就是通过一个一个盒子组成的。

    2.一个盒子拥有的属性:宽和高(widthheight)、内边距(padding)、边框(border)、外边距(margin

    width是“宽度”的意思,CSSwidth指的是内容的宽度,而不是盒子的宽度。

    height是“高度”的意思,CSSheight指的是内容的高度,而不是盒子的高度

    padding是“内边距”的意思

    border是“边框”

    margin是“外边距”

    3.宽和高

    1)宽和高只作用于内容区

    2)一般不指定高度,因为我们的内容可以把我们的盒子给撑开

    3)CSS2开始对我们的宽高引入了百分比值

    4)行内样式是不能设置宽高的

    4.内边距

    1)盒子的背景颜色是可以延伸到padding区域的

    2)如果你设置了border,那么你最好也设置padding,以免边框紧紧挤压内容。

    3)padding不允许有负值

    4)padding设置值的顺序是上、右、下、左(顺时针记忆)

    5)Padding不会重合(和margin相比较的)

    设置一个左内边距为20px;上右下内边距为30px的盒子

    6)一些元素,默认带有padding,比如ul标签。

    所以我们做站的时候,为了便于控制,总是喜欢清除这个默认的paddingmargin

      *{ margin: 0; padding: 0; }

    5.边框

    1)边框有三个特征可以指定:样式、宽度以及颜色,颜色如果不写,默认是黑色。另外两个属性不写,显示不出来边框。

    2)分开写的话写作:

    border- 1px;

    border-style: solid;

    border-color: red;

    border属性能够被拆开,有两大种拆开的方式:

    1) 按3要素:border-widthborder-styleborder-color

    2) 按方向:border-topborder-rightborder-bottomborder-left

    如果不觉得蛋疼的话,还可以拆成12条语句

    合着写的话:border:  1px  solid  red;

    6.外边距

    1)外边距总是透明的,不能设置颜色,强调没有margin-color这个属性(当然也没有padding-color这个属性)

    2)外边距是可以为负值的

    3)margin塌陷现象(margin重叠):上下重叠,取最大值,左右不重叠

    4)Margin0 auto 居中原理

    注意:

    使用margin:0 auto; 的盒子,必须有width,有明确的width

    只有标准流的盒子,才能使用margin:0 auto; 居中。

    也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;

    margin:0 auto;是在居中盒子,不是居中文本。文本居中要是有text-aligncenter

    7.正常流布局

    宏观的讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个“流”,必须从上而下,像“织毛衣”。而设计软件,想往哪里画个东西,都能画。

    1)从上到下(块级),从左到右(行内)的格式布局

    2)正常流是做不出来网页的

    8.块级元素和内嵌元素的相互转换

    块级元素可以设置为行内元素

    行内元素可以设置为块级元素

    display是“显示模式”的意思,用来改变元素的行内、块级性质(inlineblock

    9.元素浮动

    浮动是CSS里面布局用的最多的属性。

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。

    浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。

    1)当元素浮动时,元素会被视为块级(拿a标签距离)

    浮动元素脱标,将会脱离普通流,其容器(父)元素将得不到脱离普通流的子元素高度。

    2)只有横向浮动,并没有纵向浮动。

    3)浮动元素相互贴靠

    结论:假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

     div的顺序是HTML代码中div的顺序决定的。

      靠近页面边缘的一端是前,远离页面边缘的一端是后。

    float的属性值有noneleftright,有几个要点:

    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

    4)浮动元素的字围效果

    10.利用浮动来制作导航栏

    11.清除浮动

    浮动对页面的影响是什么?

    解决高度塌陷,会去追尾

    12.定位的几种类型:静态定位、相对定位、绝对定位、固定定位

    静态定位:就是我们的标准流

    相对定位:不脱标 形影分离

    默认被设置为auto

    在文档流中所占据的的空间被保留,用途一般有两个

    1)用来微调元素

    2)和绝对定位一起来使用

    绝对定位:脱标

    绝对定位的元素完全从文档流中脱离出来,所占空间不保留

    固定定位:脱标

    13.处理溢出

    Overflow:hidden

    14.设置元素的可见性

    visibility:visible(可见)hidden(隐藏)inherit(继承)(默认)

     

    15.visibility:hidden;display:none;区别:

    visibility:hidden;在隐藏时其空间仍存在,而display:none;在隐藏时其空间不存在(即完全消失)

    16.处理元素的重叠

    使用z-index属性可以设置元素的高低,这个属性仅在positionabsoluterelative时有效

  • 相关阅读:
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    FFmpeg解码H264及swscale缩放详解
    linux中cat more less head tail 命令区别
    C语言字符串操作总结大全(超详细)
    如何使用eclipse进行嵌入式Linux的开发
  • 原文地址:https://www.cnblogs.com/cp168168/p/5840903.html
Copyright © 2011-2022 走看看