美文网首页
day6。定位样式,布局,列表样式,优先级等

day6。定位样式,布局,列表样式,优先级等

作者: _Jeff_ | 来源:发表于2017-11-07 19:26 被阅读12次

定位属性:

定位就是指把元素(标签)放在哪个位置。
实际上,每个元素都有个定位属性:position。其有4个值:

1,position:static       ——静态定位;——所有元素的初始定位方式就是静态(没有额外使用position或浮动的时候)
2,position:relative;    ——相对定位:其实就是指一个元素在其父盒子中本来该放的位置(静态位置)的一个相对值(错位值)。必须使用left和top配合来设置该值。
a)举例:position:relative; left:10px; top:15px;
3,position:absolute;    ——绝对定位;指该元素相对于其上级具有非静态定位的元素的一个绝对位置。如果上级没有非静态定位设置,则会相对网页主体(html标签)。常常绝对定位就是用于在整个网页上进行“绝对位置设定”——就是相对网页主体来说。
4,position:fixed;       ——固定定位;有点类似绝对定位,但其是相对于整个“可视窗口”来设置的定位,(绝对定位是相当于网页的版面的绝对值)。固定定位的盒子是以“窗口”为参照系,而绝对定位和相对定位的盒子是以网页为参照系。

列表样式

列表样式可以设置其列表符号,列表图片(代替列表符号),列表符号的位置。

    list-style-type: 设置列表符号,可以是我们之前学的无序列表符或有序列表符。
    list-style-image:设置列表的图片(此时list-style-type自动就无效了,被代替了)
    list-style-position: 指将列表符放在li的里面还是外面:outside(外面,默认值),inside(里面)
     list-style: 这是综合属性,可以设置上述几个。

css优先级:

基本优先级:
!important 〉 行内样式 > id选择器 > 类选择器|伪类选择器 > 标签选择器 > 通用选择器 > 继承属性

居中问题

前提: 父盒子固定大小(宽高),其里面的“内容”在水平和垂直方向的居中对齐的常见做法:

内部居中:

水平居中:
A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置text-align:center;
B:“内容”为具有一定形状的行内元素(如img,input,textarea):在父盒子上设置text-align:center;
C:“内容”为块元素: margin:0 auto;

垂直居中:
A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置line-height为父盒子的高度;
B:“内容”为具有一定形状的行内元素(如img,input,textarea):同块元素(C)
C:“内容”为块元素: 在块元素上设置:position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值(top:50%;margin-top:-50% 居中)

外部居中:

img与textarea与其紧挨着的文字垂直居中对齐:设置其vertical-align:middle;
input与紧挨着的文字自然垂直居中

例子(内部水平,垂直居中)

例子
结果

相关文章

  • day6。定位样式,布局,列表样式,优先级等

    定位属性: 定位就是指把元素(标签)放在哪个位置。实际上,每个元素都有个定位属性:position。其有4个值: ...

  • 用RecyclerView写的城市列表

    分享一下城市列表的网格布局样式的demo,代码里面包括网格布局和竖直列表布局两种样式。网格样式: 竖直列表样式: ...

  • css样式入门书目录

    css样式-字体属性 css样式-背景属性 css样式-边框属性 css样式-列表属性 css样式-定位属性 cs...

  • day07

    1.布局 1.默认布局2.float布局3.层级布局(定位布局) 2.css样式的引入 3.外部样式 外部样式表 ...

  • CSS优先级算法如何计算?

    优先级就近原则,同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;优先级为:!important > ...

  • CSS选择器优先性以及权重计算

    样式根据引入和声明需要分开介绍,一般来说分为引入样式优先级和声明样式优先级。 一、引入样式优先级 引入样式优先级一...

  • CSS优先级算法如何计算

    优先级就近原则,同权情况下样式定义为最近者为准载入样式以最后载入的定位为准(后写的样式优先级高,前提是大家的权重一...

  • 第一次面试题目总结

    一面 css 1.css引用的方式和优先级 行内样式、内嵌样式、链接样式、导入样式 2.左固定右自适应布局的两种方...

  • 非样式布局

    非布局样式-字体 非布局样式 - 行高 非样式布局 - 背景 非布局样式 - 边框 非布局样式 - 滚动 非布局样...

  • 仿掘金项目首页制作

    分类管理 样式美化 首页布局 样式美化 支持响应式 html页面头部添加 文章列表 样式美化 右侧边栏----用户...

网友评论

      本文标题:day6。定位样式,布局,列表样式,优先级等

      本文链接:https://www.haomeiwen.com/subject/fatrmxtx.html