美文网首页
样式以及盒模型

样式以及盒模型

作者: 知更鸟_b4d4 | 来源:发表于2017-08-17 16:41 被阅读0次

text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

text-align: center作用在块级元素上,可以让元素内文本以及 display 为 inline 和 inline-block 的子元素在元素内水平居中。

IE 盒模型和W3C盒模型有什么区别?

  • w3c盒模型


  • IE盒模型


  • 区别:W3C盒模型中padding、border所占的空间不在width和height范围内,而IE盒模型种padding、border所占的空间包含在width和height范围内。

*{ box-sizing: border-box;}的作用是什么?

就是当你设置width和height时,这些属性的作用范围
详细说明
示例

line-height: 2和line-height: 200%有什么区别?

-line-height: 2是指元素行高为font-size的2倍,指的是相对自身font-size大小的倍数。
-line-height: 200%是指元素行高为父元素font-size大小的2倍

inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

  • inline-block同时具有块级元素和行内元素的一些特性。既可以像行内元素一样不用独占一行,又可以像块级元素一样可以设置宽高。
  • 去除缝隙的方法有三种:
  1. 在代码中两个元素之间不使用换行,直接连写。
  2. 可以给需要消除缝隙的元素设置一个父元素,在父元素中使用font-size:0;然后再在元素中使用font-size设置元素原本的大小。
  3. 父元素设置dispaly:flex,Flex是Flexible Box的缩写,意为"弹性布局"。注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
  • 为元素设置vertical-align:top;属性。

CSS sprite 是什么?

CSS sprite是指精灵图或者雪碧图。就是把页面上的多个图片集合在一张图片上,然后使用背景图片时利用background-position属性,定位所需要的图片在精灵图上的位置即可。这样一个网页的背景图不需要向服务器发送多次请求,图片数量也会变少,加载网页时速度会变快。

让一个元素"看不见"有几种方式?有什么区别?

有四种方式:

  1. 设置透明度,使用opacity:0;使元素完全透明(这个貌似会影响z-index)。
  2. 隐藏元素,使用visibility:hidden;用户不可见。
  3. 使元素在页面消失,使用dispaly:none;元素不会占用位置。
  4. background-color: rgba(0,0,0,0) 只是背景色透明。

相关文章

  • 样式以及盒模型

    text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align: ...

  • css问题

    标准盒模型&非标准盒模型(怪异盒模型) 标准盒模型 box-sizing (模型样式) 语法: box-sizin...

  • 6、盒模型和文本溢出

    第一节 盒模型 1、盒模型的概念 2、盒模型的组成 3、盒模型的相关属性 边框样式:solid/dashed/...

  • flex 总结

    布局相关 所有 Weex 组件都支持以下通用样式规则。 盒模型 Weex 盒模型基于 [CSS 盒模型],每个 W...

  • 2019-04-05

    CSS基础样式&盒模型&字体图标 1.IE 盒模型和W3C盒模型有什么区别? IE盒模型的width包括conte...

  • Weex——公共样式

    所有 weex 标签都有以下基本样式规则。 weex 盒模型基于 CSS 盒模型,每个 weex 元素都可视作一个...

  • css怪异盒模型样式

    盒模型有两种:① 标准模式② 怪异模式(quirks 模式)---------------------------...

  • CSS基础样式&盒模型

    1、IE 盒模型和W3C盒模型有什么区别? IE盒模型中,给元素设置的宽高包括其padding和border值,而...

  • 快应用页面样式与布局

    快应用页面样式与布局 在课程的大纲 盒模型 长度单位 设置样式 Flex布局示例 动态修改样式 引入less预编译...

  • 盒子9.10

    盒子模型 盒子分为几部分: 去除浏览器默认样式 内联元素的盒模型 display和visibility overf...

网友评论

      本文标题:样式以及盒模型

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