zoukankan      html  css  js  c++  java
  • CSS 盒模型/段落/换行/缩进

    CSS 盒模型/段落/换行/缩进

    1.盒模型

    box-sizing: content-box|border-box|inherit;

    content-box默认 W3C标准盒模型) :
    实际宽度/高度 = width/height(元素内容大小) + padding + border + margin

    
    
    border-boxIE5.5及其更早版本的默认模型,现在默认的都是W3C标准盒模型了): 
    width/height = 元素内容大小 + padding + border
         实际宽度/高度 = width/height + margin 




    2.滚动条

      visible 默认值。内容不会被修剪,会呈现在元素框之外。 - 溢出部分仍然显示在盒子模型外。

      hidden 内容会被修剪,并且其余内容是不可见的。 - 溢出部分不显示
      scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。- 始终显示
      auto  如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。(推荐:该显示才显示)
      inherit 规定应该从父元素继承 overflow 属性的值。

     

    3.换行

       1.<br />
      2.<p>标签来实现换行
      3.CSS设置宽度自动换行:对于连续的数字和英文则无效。
      4.连续英文字母及数字换行使用CSS换行。使用word-wrap:break-word与word-break:break-all

        word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句,

        word-wrap:break-word:会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;

        word-break:break-all:则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了

       ps:CSS3中将word-wrap改名为overflow-wrap; 

    4.不换行

     white-space:nowrap; 所有内容都强制在同一行中显示。(遇到<br>除外)    

       normal    默认。空白和换行字符串会被浏览器忽略。
       pre       保留空格和换行,容器边界不自动换行。和HTML标签<pre>类似- 保留原字符串样子。
       pre-wrap  保留空格和换行,容器边界自动换行。
       pre-line  与pre-wrap区别:多个空格合并成一个空格(注意:行首不保留空格)

          注意:不管什么值,<br>都会换行。

  • 相关阅读:
    基于Taro开发小程序笔记--07修改state的任意数据
    基于Taro开发小程序笔记--06Taro框架生命周期
    基于Taro开发小程序笔记--05小程序图片放大组件
    基于Taro开发小程序笔记--04路由跳转的几种方式
    基于Taro开发小程序笔记--03项目API处理
    基于Taro开发小程序笔记--02项目结构梳理
    基于Taro开发小程序笔记--01开发前准备
    2018年那些事
    Css Sticky footer布局
    背景图毛玻璃效果
  • 原文地址:https://www.cnblogs.com/caoshouling/p/12177225.html
Copyright © 2011-2022 走看看