首页 前端知识 最新CSS3定位元素

最新CSS3定位元素

2024-08-25 23:08:38 前端知识 前端哥 354 58 我要收藏

第3章 定位元素

学习盒模型,页面版式主要由三个属性控制:

position属性,控制元素位置关系。

display属性,控制元素堆叠,并排,还是不在页面上出现。

float属性,提供控制的方式,以便把元素组成多栏布局。

3.1 理解盒模型

HTML实际就是一堆盒子组成的。

每个元素盒子属性:

  • 边框(border),可以设置边框宽窄,样式,颜色。
  • 内边距(padding),可以设置盒子内容区与边框距离。
  • 外边距(margin),可以设置盒子与相邻元素的间距。

    简写样式

    CSS 为边框、内边距和外边距分别规定了简写属性,让你通过一条声明就可以完成设定。在每

    个简写声明中,属性值的顺序都是上、右、下、左。想象一下顺时针旋转就记住了。举个例子

    吧,如果要设定盒子的外边距,不用简写属性就得这样写:

    {margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}

    使用简写属性,则可以简写为这样:

    {margin:5px 10px 12px 8px;}

    注意,4 个值之间有空格,但不能是其他分隔符(比如逗号之类的)。甚至,你都不用把4 值全都写出来——如果哪个值没有写,那就使用对边的值。

    {margin:12px 10px 6px;}

    对这个例子来说,由于没有写最后一个值(左边的值),所以左边就会使用右边的值,即10px。

    而在下面的例子中:

    {margin:12px 10px;}

    只写了两个值,上和右,因此缺少的下和左就会被设定为12px 和10px。最后,如果你只写一个值:

    {margin:12px;}

    那么4 个边都取这个值。使用这种简写属性,不能绕开上和右,只给下和左设定值,即使上和右都是零也不行。绕不开怎么办?如果它们真是零的话,那就写0 呗,比如:

    {margin:0 0 2px 4px;}

    另外,每个盒子的属性也分三种粒度,到底选择哪个粒度的属性,要看你想选择哪条边,以及那条边的哪个属性。这三种粒度从一般到特殊分别是举例如下。

    1. 全部3 个属性,全部4 条边

    {border:2px dashed red;}

    2. 1 个属性,全部4 条边

    {border-style:dashed;}

    3. 1 个属性,1 条边

    {border-left-style:dashed;}

    混合使用这三种粒度的简写属性达成设计目标是很常见的。比如说吧,我想为盒子的上边和下边添加4 像素宽的红色边框,为左边添加1 像素宽的红色边框,而右边没有边框。可以这样写:

    {border:4px solid red;} /* 先给4 条边设置相同的样式 /

    {border-left-width:1px;} / 修改左边框宽度 /

    {border-right:none;} / 移除右边框 */

    类似地,其他属性也都有这三级粒度,例如padding 和border-radius 等。

3.1.1 盒子边框

  • 宽度(border-width),可以使用thin,medium,thick等,也可以使用百分比和正数。
  • 样式(border-style),有none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset等。
  • 颜色(border-color),可以使用任意颜色值。

简写: p { border: 3px solid red; }

* 推荐下面规则作为样式表的第一天规则:* { margin:0;padding:0; }

* 叠加外边距,两个元素相邻,外边距以最大的为主。

外边距单位,px这些绝对值不会变,如果用em则会随着字体变大而变大。

3.2 盒子有多大

1.没有宽度的盒子,指的是不设置宽度的盒子,默认auto是父元素宽度。

2.有宽度的盒子,设定宽度,增加内外边距,整体宽度与box-sizing有关。

3.3 浮动与清除

影响浮动的因素还有很多,推荐读者看一看Eric Meyer 的那本Cascading Style Sheets2.0 Programmer’s Reference(2006,McGraw-Hill Osborne Media)。

3.3.1 浮动

CSS设计float的目的是实现文本绕排图片的效果。

此属性称为创建多栏布局最简单方式。

1.文本绕排图片

代码:图片脱离文档流了,p不认为在图片后面了,直接来到body左上角,但是文本内容会绕开浮动的图片,但浮动非图片元素时要给宽度,否则后果难以预料。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            width: 200px;
            height: 120px;
            float: left;
            margin: 0 4px 4px 0;
        }

        p {
            margin: 0;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <img src="./img/moon.jpg" alt="" />
    <p>
        8月20日凌晨
        今年首个“超级月亮”现身
        全国多地都能观赏
        从天文学的角度称为
        “近地点满月”
        此时,月亮看起来特别大
        在中国人的观念里
        月亮不只是
        围绕地球旋转的星球
        还寄托了无限幻想与思念
        “明月照高楼,流光正徘徊”
        忙碌的火车站洒满皎洁月光
        如同披上一层轻纱
        静谧又朦胧
        迎接南来北往的旅客
        “露从今夜白,月是故乡明”
        华灯初上,五彩斑斓
        无数次重逢和离别在站台上演
        乡愁是一轮明月
        也是一张车票.
    </p>
</body>

</html>

2.创建分栏

在此基础上多用一次float属性,给p宽度200px,左浮动。

3.3.2 围住浮动元素三种方法

原始效果:

图片浮动后,footer被提上来了,紧挨section.

方法一:为父元素添加overflow:hidden

强制父元素包围浮动元素。

 

1.overflow真正的用途防止包含元素被超大内容撑大,包含元素还是原宽度,超大内容会被剪切掉。

2.能可靠的迫使父元素包含其浮动子元素。

方法二:同时浮动父元素

也让父元素浮动起来。

浮动section以后,不管子元素是否浮动,他都会仅仅包围住子元素。

宽度还是浏览器同宽,强制footer呆在下发,应用clear:left,被清除元素

无法提升到浮动元素旁边。

方法三:添加非浮动的清除元素。

clearfix规则:

.clearfix::after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

没有父元素如何清除

清除某些浮动元素,正好没有父元素作为容器包围他们。

最简单方法给浮动元素应用clear:both.

第二张图片右侧文字太少,导致第三张图片不是我们想要的。

解决方法:给段落增加clearfix清除两侧浮动。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16915.html
评论
发布的文章

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

编译JSONCPP源码

2024-09-04 23:09:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!