选择布局.html,布局.html

布局 | 拼命赶进度

data-level="2.3.11"

data-chapter-title="布局"

data-filepath="布局.md"

data-basepath="."

data-revision="Sun Sep 03 2017 23:30:11 GMT+0800 (中国标准时间)"

data-innerlanguage="">

  • Introduction

  • 1.

    HTML5

    • 1.1.

      常用元素

    • 1.2.

      图片音频视频

    • 1.3.

      列表及表格

    • 1.4.

      表单form元素

  • 2.

    CSS

    • 2.1.

      如何引入CSS

    • 2.2.

      选择器

      • 2.2.1.

        通配选择符

      • 2.2.2.

        元素选择符

      • 2.2.3.

        id 及 class 选择符

      • 2.2.4.

        群组选择符

      • 2.2.5.

        关系选择符

      • 2.2.6.

        属性选择符

      • 2.2.7.

        伪类选择符

      • 2.2.8.

        伪对象选择符

    • 2.3.

      CSS的常用样式

      • 2.3.1.

        字体样式

      • 2.3.2.

        元素样式

      • 2.3.3.

        边框样式

      • 2.3.4.

        盒子模型

      • 2.3.5.

        段落样式

      • 2.3.6.

        背景样式

      • 2.3.7.

        列表样式

      • 2.3.8.

        变形样式

      • 2.3.9.

        过渡动画

      • 2.3.10.

        自定义动画

      • 2.3.11.

        布局

      • 2.3.12.

        视口

      • 2.3.13.

        CSS总结

  • 3.

    JavaScript

  • Published with GitBook

布局

文档流

文档流其实就是指浏览器生成页面的顺序。

它是浏览器解析网页的一个重要概念,对于一个XHTML网页,body 元素下的任意元素,

根据其前后顺序,组成了一个个上下关系,这便是文档流。浏览器根据这些元素的顺序去

显示它们在网页中的位置。

文档流是浏览器的默认显示规则

display(元素显示模式)

display : block | none | inline | inline-block

display 属性用来设置元素的显示方式。
block 块级元素,块对象指的是元素显示为一个方块,默认显示状态下将占据整行,其它的元素只能另起一行显示。

inline 行内元素,行间对象与block刚好相反,它允许其它元素在同一行显示。

none 隐藏对象

>

display:none和visible:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,经过亲自实验,我发现使用 visible:hidden属性会使对象不可见,但该对象在网页所占的空间没有改变(看不见但摸得到),等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失(看不见也摸不到)。

float(元素的浮动)

float : none | left | right
浮动的时候元素的会类似于 “行内块级元素”,可以设置宽高和上下外边距
浮动的目的:就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性。

1.任何申明为 float 的元素自动被设置为一个“块级元素”。
2.在标准浏览器中 浮动元素脱离了文档流 ,所以浮动元素后的元素会占据浮动元素本来应该所处的位置。
3.如果水平方向上没有足够的空间容纳浮动元素,则转向下一行 。
4.文字内容会围绕在浮动元素周围 。
5.浮动元素只能浮动至左侧或者右侧 。

清除浮动

clear : none | left | right | both

清除浮动的三种方式
1.在浮动元素后面紧跟一个空div,并给该div设置clear:both(全浏览器兼容)
2.给父元素添加overflow:auto即可(除了ie6要用zoom:1,其余都支持)

使用after伪对象清除浮动(支持IE8以上浏览器,但IE8只支持单冒号写法:after)

    div::after{

display:block;

clear:both;

content:’’;

visibility:hidden;

height:0;

}

position(元素的定位)

position : static | absolute (绝对定位)| fixed(固定定位) | relative(相对定位)

absolute

1.脱离文档流。
2.通过 top,bottom,left,right 定位。
3.如果父元素 position 为 static 时,将以body坐标原点进行定位。
4.如果父元素 position 为 relative 时,将以父元素进行定位。

relative
1.不脱离文档流
2.参考自身静态位置通过 top,bottom,left,right 定位。

fixed
固定定位实际上只是绝对定位的特殊形式;固定定位的元素是相对于浏览器窗口而固定,

而不是相对于其包含元素;即使页面滚动了,它们仍然会处在浏览器窗口中跟原来完全一

样的地方。

z-index(元素的层叠关系)

z-index : auto | number
当元素发生重叠时,可以通过 z-index 属性,设置其层叠的先后顺序。

较大 number 值的对象会覆盖在较小 number 值的对象之上。

CSS Reset

body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,menu{margin:0;padding:0;}

*{box-sizing:border-box}

ul,dl,ol{list-style:none;}

img,fieldset,input[type="submit"]{border:0 none;}

em{font-style:normal;}

strong{font-weight:normal;}

table{border-collapse:collapse;border-spacing:0;}

button,input[type="button"]{cursor:pointer;border:0 none;}

a,button,input,img{-webkit-touch-callout:none;}

img{/*pointer-events:none;*//*禁止图片的点击事件,例如长按保存图片*/}

input,select,textarea{outline:none;}

a{text-decoration:none;}

.fl{ float: left}

.fr{ float: right}

.clear{clear:both;}

.clearfix::after{

display:block;

clear:both;

content:’’;

visibility:hidden;

height:0;}

html,body{

/*禁止用户选择元素*/

-moz-user-select:none;

-webkit-user-select: none;

-ms-user-select: none;

-khtml-user-select:none; /*禁止元素点击出现半透明黑色背景*/

-webkit-tap-highlight-color:rgba(0, 0, 0, 0); }

html {height: 100%;width: 100%;font-family: 'Heiti SC', 'Microsoft YaHei';outline: 0;-webkit-text-size-adjust:none;}

body {height: 100%;margin: 0;position: relative;}

定宽布局

适用图片多、互动类

app端不完全兼容

流式布局

width=device-width

1.不管任何设备,保证内容正常大小
2.取1:2来进行设计
3.避免失帧率过大,又保证了图片比例适中
4.利用了浮动的特点:在同一行若还有空位则会在同一行显示,位置不足的话就会紧跟在下一行排列也就是说,在小型设备(小屏幕手机:iphone4、iphone5、ip6)和中型设备(ip6 plus 或者是平板设备)有很好的适应性
5.虽然可以让各种屏幕都适配,但是显示的效果极其的不好,因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<style>

.fl{

float: left;

}

.div {

width: 100%;

height: 100px;

background: deepskyblue;

}

.div1 {

width: 10%;

height: 100px;

background: orange;

}

.div2 {

width:20%;

height: 100px;

background: deeppink;

}

.div3 {

width:50%;

height: 100px;

background: lightgreen;

}

</style>

</head>

<body>

<div class="div1 fl">

</div>

<div class="div2 fl">

</div>

<div class="div3 fl">

</div>

</body>

两列式布局

一列固定,一列自适应
1.让固定的那一列设置固定宽度,并设置浮动属性
2.然后,在固定列的后面写自适应列,不需要设置宽度,但记得设置overflow:hidden,这样的话,自适应列的内容就不会出现在浮动列后面

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<style type="text/css">

.left{

height: 500px;

background: red;

overflow-x: hidden;

}

.right{

width: 20%;

height: 500px;

background: green;

float: right;

}

.right-1{

width: 20%;

height: 500px;

background: skyblue;

float: right;

}

</style>

<div class="right">

qwe

</div>

<div class="right-1">

asd

</div>

<div class="left">

<h1>zxcaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbaaaaabbbbbbbbbbbbbbbbbbb</h1>

</div>

</body>

长度单位

px 绝对长度单位
em、rem 相对长度单位
em:相对父元素的长度
rem:相对根root的长度

media媒体查询

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

@media (max-width: 768px) {

.navbar{

.menu-sousuo{

.bottom{

i,p,span{

font-size: 20px;

}

}

}

}

}

bootstrap

bootstrap是一个CSS/HTML框架,一个用于前端开发的开源工具包.自带预处理、媒体查询、js。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。http://www.bootcss.com/

flex弹性盒子

给父亲设置flex,其子元素都会带有弹性盒子的特性

  • flex-grow:增加 自动分配父亲剩余宽度
  • flex-shrink:减少 自动分配父亲剩余宽度
  • flex-basis:如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
  • flex-wrap:换行、允许多行
  • align-conten:调整伸缩行在盒子里的对齐方式
  • align-item:定义每一个子项在侧轴(纵轴)方向上的对齐方式
  • align-self:定义flex子项单独在侧轴(纵轴)方向上的对齐方式
  • justify-content:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
  • flex-start(弹性容器第一行的侧轴开始)
  • flex-end(弹性容器最后一行的侧轴开始)
  • center(弹性容器中间的侧轴开始)
  • space-between(各行在弹性盒容器中平均分布)
  • space-around(各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。)
  • stretch(各行将会伸展以占用剩余的空间)
  • order:设置或检索弹性盒模型对象的子元素出現的順序。 例子:老虎机

require(["gitbook"], function(gitbook) {

var config = {"expandable-chapters":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"ace":{},"mdinhtml":{},"highlight":{},"livereload":{}};

gitbook.start(config);

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值