css(二)盒子模型和不同元素类型

原创 2015年11月17日 19:02:42
  1. 块级元素
    <div>、 <p>、<h1>、<form>、<table>、<ul>、<li>
    转化为块级元素 display:block;
    特点:(1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。(2)元素的高度、宽度、行高以及顶和底边距都可设置。(3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
  2. 内联元素<span>、<a>、<label>、 <strong>、<em>
    display:inline
    特点:(1)和其他元素都在一行上(2)元素的高度、宽度及顶部和底部边距不可设置(3)元素的宽度就是它包含的文字或图片的宽度,不可改变
  3. 内联块状元素
    <img>、<input>
    display:inline-block
    特点:(1)和其他元素都在一行上(2)元素的高度、宽度、行高以及顶和底边距都可设置。
  4. 盒子模型(块状元素具有)
    1. 边框: border:2px solid red;
      border-width:2px;
      border-style:solid;//dashed(虚线),dotted(点线)
      border-color:red;

      注:可以只为一个边框设置样式,即不同边框设置不同的样式
    2. 这里写图片描述
    3. 填充和边界
      padding:20px 10px 15px 30px;//上右下左
      margin:20px 10px 15px 30px;
版权声明:如果文中有任何问题或者值得讨论的地方,都可以在下方留言或者QQ526664687,欢迎交流!!!

初学CSS-浮动、盒子模型、伪类、伪元素、定位———Day4学习笔记

 1.浮动     float可以控制块级元素浮动  (1)#d1     {       float:left;/*左浮动*/      }      #d2     {   ...

css盒子模型及其他元素属性简介

简介盒子模型的属性与用法

CSS(2)伪元素、盒子模型

扩展选择器 ☆关联选择器 标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。例如: p { color:#00FF00;} p b { color...

[HTML/CSS]盒子模型,块级元素和行内元素

目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用widt...
  • judyge
  • judyge
  • 2016年07月18日 16:07
  • 242

HTML/CSS]盒子模型,块级元素和行内元素

HTML/CSS]盒子模型,块级元素和行内元素 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效。虽然自己不是做前端的,但是,在项目...
  • NotBad_
  • NotBad_
  • 2016年07月21日 11:26
  • 1284

css盒子模型

  • 2016年08月22日 15:40
  • 35KB
  • 下载

HTML+CSS入门笔记二之HTML+CSS盒子模型

(重点)盒子模型 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白...

css盒子模型

  • 2016年02月14日 17:43
  • 230KB
  • 下载

CSS盒子模型结构

  • 2013年06月30日 13:58
  • 14KB
  • 下载

盒子模型、元素定位、选择器

盒子模型 margin:外边距 margin-top、margin-right、margin-bottom、margin-left(上、右、下、左) 使用方式 (1)margin:30px...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css(二)盒子模型和不同元素类型
举报原因:
原因补充:

(最多只允许输入30个字)