美文网首页web
CSS布局相关

CSS布局相关

作者: 烫成黄毛 | 来源:发表于2018-12-24 22:50 被阅读17次

display的四种取值:

  • inline:使块级元素在一行展示(大部分HTML元素的宽、高、上下边距就无法设置了)
  • block:使内联元素各自占一行
  • inline-block:修饰的元素称之为行内块元素,它们会像行内元素一样在同一行显示,又可以像块元素一样设置高、宽、行高、边距
  • none:当一个元素的display属性被设为none时,该元素不会被渲染,也不会占位,就像不存在一样。

水平居中

  • text-align:center
    用于内联元素,inline-block元素或者文字,使用方法是为目标的父元素添加该样式。(可使用包裹器技巧)

e.g 想让一个<a>居中,可以用一个<p>包裹住它,然后给<p>加上一个text-align:center属性

  • margin: 0 auto
    用于块级元素
  • 直接调整margin,padding

垂直居中

  • line-height=height
    大多数情况下管用
  • 直接调整margin,padding

左右布局

  • float+clearfix
    子元素一个float:left,一个float:right,且宽度各自50%,父级元素clearfix
  • 绝对定位
    父级元素position: relative,子元素position: absolute,然后调整子元素的边距

左中右布局

  • float+clearfix
    子元素一个float:left,一个float:right,中间元素会自适应,然后调整中间元素的边距即可。
  • 绝对定位
    父级元素position: relative,子元素position: absolute,然后调整子元素的边距(左边元素left: 0;中间按需求设置;右边元素right: 0)

知识点

  • 内联元素的左右padding有用,上下padding没用(因为上下高度是由字体建议行高决定的)。加上display: inline-block就可以了。
  • 包裹器wrapper:在xx元素外面写一个div命名为xx-wrapper,将其包裹起来。可以实现:

内联元素居中:包裹一个父元素,添加text-align样式
元素不好利用padding调整位置:包裹一个父元素,在父元素上添加padding

  • 对块级元素设置inline-block,块级元素宽度会收缩
    块级元素下方会产生空隙(解决方法vertical-align:top;

相关文章

  • css布局

    最近在学习css相关的知识,本文主要总结一些css布局相关的知识。 一、左右布局和左中右布局 左右布局和左中右布局...

  • 小程序开发必备知识总结-思维导图-布局篇

    Flex布局使用 CSS技巧相关

  • CSS布局相关

    CSS真的很烦很难写!做静态页面时,写CSS总是调来调去,就记个笔记,梳理一下思路。正常文档流,从左到右,从上到下...

  • CSS布局相关

    CSS相关 1.左边定宽,右边自适应方案: 2.左右两边定宽,中间自适应 3.CSS左右垂直居中 设置paddin...

  • CSS布局相关

    display的四种取值: inline:使块级元素在一行展示(大部分HTML元素的宽、高、上下边距就无法设置了)...

  • CSS布局相关——常见布局

    流体特性与BFC特性 流体特性 什么是流体特性块状水平元素(如div),在默认情况下(非浮动、绝对定位等),水平方...

  • 2019-04-04

    关于如何使用css布局 左右布局 在页面开发过程中要对页面进行左右布局排版,如何使用css的相关知识来做到呢? 以...

  • CSS基础

    介绍css相关知识 和 非布局属性。 css:Cascading Style Sheet 层叠样式表,简而言之 就...

  • css grid layout 初步认识

    css grid layout 初步认识 近期在在回顾css的时候,重新学习了一下css的相关布局。根据之前常用的...

  • 6、盒子模型 边框、圆角、阴影、内外边距、外边距塌陷

    1、网页布局的本质 网页布局的核心本质: 就是利用 CSS 摆盒子。 网页布局过程: 先准备好相关的网页元素,网页...

网友评论

    本文标题:CSS布局相关

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