为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
初识HTML(5)+CSS(3)_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。 inline-block元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶和底边距都可设置。
    查看全部
  • 行内元素之间会产生间隙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;}
    查看全部
  • 在html中,<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从页使用div元素具有内联元素特点。 内联元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
    查看全部
  • 什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点: 1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行) 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
    查看全部
  • 元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码: div{padding:20px 10px 15px 30px;}
    查看全部
  • 块状元素有一个特点之一:在不设置宽度的情况下,显示为父容器的100%。
    查看全部
  • 因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
    查看全部
  • 语法是: 选择器{属性:值;} 1px、solid、red都是值,所以只在red后加;(solid是实线) .food>li{border:1px solid red;}
    查看全部
  • 总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
    查看全部
  • 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。 inline-block元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶和底边距都可设置。
    查看全部
  • style type=text
    查看全部
  • font-weight设置文本的粗细.
    查看全部
  • wujinlong <link href="base.css" rel="stylesheet" type="text/css" /> 注意: 1、css样式文件名称以有意义的英文字母命名,如 main.css。 2、rel="stylesheet" type="text/css" 是固定写法不可修改。 3、<link>标签位置一般写在<head>标签之内。
    查看全部
    0 采集 收起

    2018-03-22

  • 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。 例: body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; } 这么多行的代码其实可以缩写为一句: body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; }
    查看全部
    0 采集 收起

    2018-03-22

  • Relative与Absolute组合使用 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定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。
    查看全部

举报

0/150
提交
取消
课程须知
没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。
老师告诉你能学到什么?
本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识,可以利用HTML(5)、CSS(3)样式技术制作出简单页面。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!