html元素也可以分为替换元素和非替换元素 1.替换元素 替换元素是由浏览器根据表示的元素和属性决定显示的内容. 例如:<img src="./image.jpg" />他由标签元素img和属性src来决定显示的内容. <input type="text" />如果text换成其他的属性值,input会显示不同的样子,这也是有input和type属性值决定显示内容的. 像<img>.<input>.<textar…
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一…
文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> <form> <table> <p> ... ·行内元素 <span> <title> <strong> <input> <select> <img> <a> ... 此处延伸文档流中块级…
https://segmentfault.com/q/1010000002552573/a-1020000002552589 :'<,'>s/替换项/替换为/g 以下命令将文中所有的字符串idiots替换成managers: :1,$s/idiots/manages/g 通常我们会在命令中使用%指代整个文件做为替换范围: :%s/search/replace/g 以下命令指定只在第5至第15行间进行替换: :5,15s/dog/cat/g 以下命令指定只在当前行至文件结尾间进行替换: :.,$…
行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行内元素还是块级元素都要另起一行,单独占一行. 对于行内元素设置with.height.margin值无效,但对于块级元素,设置这些值是有效的. 行内块级元素在IE8以下的兼容性 div { display: inline-block: *zoom: 1: *display: inline: } 解析…
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inline-block:将行内元素的display属性改为inline-block就可以控制行内元素的长和宽: 常见的块级元素:div ul ol li dl dt  p;常用的行内元素:a b span img input : inline-block和block的区别:简单点说,布局的时候,想在行级…
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块级元素:块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素,例如div和p.常见的块级元素:(1)div:主要用来进行框架布局.(2)h1-h6:用来设置不同级别的标题.(3)p:创建段落,会自动在其前后创建一些空白.(4)hr:用来创建分隔先.(5)ol:创建有序列表.(6)ul:创建…
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文本有效,对元素无效,不能设置元素的对齐方式: 3.表格元素td是属于inline-block,可以使用text-align设置td中的文本对齐方式: 二.水平居中和垂直居中 1.水平居中 (1) 文本.图片等行内元素的水平居中 给父元素设置text-align:center可以实现文本.图片等行内元…
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相邻的行内元素在同一行,当他们宽度超过了容器的宽度才会自动换行.行内元素的宽度.高度.内边距的 top/bottom和外边距的top/bottom都是不可改变的,但 padding 和 margin 的 left 和 right 是可以设置的.常见的行内元素有:span.a.br... 块级元素的特性…
首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layout inline-block">         <article class="left-center-right">             <div class="left"></div>           …