-
在右边的代码编辑器中大家可以看到我们为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。查看全部
-
元素分类--内联块状元素 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。 inline-block元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。 提示：下一小节是用视频动画来讲解css中的盒模型。查看全部
-
解决行内元素间隙bug问题 行内元素之间会产生间隙bug问题的场景： 1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。 如下代码： <div> <a>1</a> <a>2</a> <span>33333</span> <span>44444</span> <em>555555</em> </div> 解决方法： 1、写在一行，之间不要有空格之类的符号。 <div> <a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em> </div> 2、使用font-size:0 div{font-size:0;} a,span,em{font-size:16px;}查看全部
-
解决行内元素间隙bug问题 行内元素之间会产生间隙bug问题的场景： 1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。 如下代码： <div> <a>1</a> <a>2</a> <span>33333</span> <span>4...查看全部
-
http://img1.sycdn.imooc.com//543b4cae0001b34304300350.jpg查看全部
-
元素分类--内联元素 在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的wiki中有介绍，感兴趣的小伙伴可以去查看。查看全部
-
可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范： 1、参照定位的元素必须是相对定位元素的前辈元素： <div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div> 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。查看全部
-
元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。查看全部
-
元素分类 在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input>查看全部
-
<link href="base.css" rel="stylesheet" type="text/css" /> 注意： 1、css样式文件名称以有意义的英文字母命名，如 main.css。 2、rel="stylesheet" type="text/css" 是固定写法不可修改。 3、<link>标签位置一般写在<head>标签之内查看全部
-
段落排版--对齐 想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。) h1{ text-align:center; } <h1>了不起的盖茨比</h1> 同样可以设置居左： h1{ text-align:left; } <h1>了不起的盖茨比</h1> 还可以设置居右： h1{ text-align:right; } <h1>了不起的盖茨比</h1>查看全部
-
段落排版--字间距、字母间距 文字间隔、字母间隔设置： 如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现，如下面代码： h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1> 注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。 单词间距设置： 如果我想设置英文单词之间的间距呢？可以使用word-spacing来实现。如下代码： h1{ word-spacing:50px; } ... <h1>welcome to imooc!</h1> 注意：当设置元素为英文时，letter-spacing 设置不是英文单词的间隔，而是字母间的间隔。查看全部
-
段落排版--行间距（行高） 这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。 p{line-height:1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>查看全部
-
段落排版--缩进 中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现： p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> 注意：2em的意思就是文字的2倍大小。查看全部
-
固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。 #div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> ....查看全部
举报
0/150
提交
取消