复习HTML+CSS随笔

原创 2016年08月31日 12:05:38

HTML内容多,学习过程更像是学习英语。很多内容学过很长时间后就会遗忘,重新复习起来,整理些精华给自己看。

这次复习我选择了慕课网。很多内容都是在慕课网上摘抄,给自己整理成笔记。

1.元素实际大小=border+padding+width/height

2.块级元素 <p><h1-h6><form><div><ul><ol><li>  独占一行 可设置宽高
  内联元素<span><em><strong><a><label>     可与其他元素占同一行  不能设置宽高
  内联块元素<img><input>              可与其他元素占同一行  可以设置宽高
3.绝对定位: absolute 相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于浏览器窗口
  相对定位: relative 相对于以前的位置进行移动(实际还在文档流中原有位置,别的元素无法占据。比如从一排一号移动到二排四号,一排一号这个位置别的元素无法占用)
  固定定位: fixed 相对于浏览器视图移动(position:fixed bottom:0 right:0 将元素固定在右下角 常见的网页广告就是这个位置)
  eg:#box1是#box2的父元素。若要实现#box2相对于#box1的定位,要设置父元素#box1 position:relative;设置#box2 position:absolute;即可。
4.字体代码缩写,至少要指定font-size和font-family属性。在缩写时 font-size 与 line-height 中间要加入“/”斜扛
5.水平居中总结:
    定宽度块状元素:设置margin-left,margin-right:auto。
    不定宽度块状元素:{
                1.display:table;margin:0 auto;
                2.display:inline;text-align:center;
                3.通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
                }
6.垂直居中总结:
    父元素高度确定的单行文本:设置line-height=height。
    父元素高度确定的多行文本{
                1.将元素插入在<table>中,td标签默认设置vertical-align:middle。
                2.在 chrome、firefox 及 IE8 以上的浏览器下设置 display:table-cell;vertical-align:middle。

}



  不定时更新 

相关文章推荐

html5与css3随笔

css盒模型 元素盒类型 css盒模型中的display属性,可以更改元素本身盒类型。其主要的类型有:1.块级元素 2.行内元素,3.行内-块级元素(内联块);4.隐藏元...

html5 css js前端开发五子棋UI篇--基于慕课网五子棋视频教程的随笔

第一次写笔记,不知道带有别的网站是否违规,为了尊重别人果实,这次笔记就是基于慕课网五子棋教程,大家有兴趣可以去看一下。我自己增加了开始,暂停,继续,重新开始的按钮,由于是新手,最大目的在于实现功能,其...

前端 html css 复习

以前学过不过基本忘记了,先简单复习下。 HTML 就熟悉一些常用标签   搬运一下: 创建一个HTML文档 设置文档标题和其它在网页中不显示的信息 设置文档的标题    ...
  • rendiqi
  • rendiqi
  • 2017年06月24日 10:48
  • 63

CSS3主要知识点复习总结+HTML5新增标签

分享2014-4-1 HTML5上课笔记 2、CSS3属性(内核前缀) Mozilla 内核   css前缀-moz;  WebKit  内核   css前缀-webkit ;(...

2016.11.7 html5+css(复习1)

2016.7.26:acity">yt。opacity:透明度。 text-indent:2em; /*缩进*/。overflow: scoll;(超出滚动)。letter-spacing: 3px;...

css学习随笔

清除浮动 一般会再body的底部再加一个div,里面不用放内容 样式: .clr{      clear:both;      width:0px;      height: 0px; } ...

CSS属性学习随笔

CSS的z-index属性 通常认为HTML页面是二维的,但实际上,CSS还有一个z-index属性,允许层叠元素。 默认的拜访规则 假定元素没有指定的z-index属性,那么元素按照如下顺序叠放...

html5泡泡龙游戏开发随笔

由于刚刚入职,上一款游戏开发已经进入尾声,所以在下一款游戏到来之前的一段时间,做了一个泡泡龙的游戏。在做这款小游戏时候,发现里面的逻辑还是挺多的,所以在此记录一下开发过程中比较重要的点。 用到的技术...

前端html随笔

浏览器调试工具: Elements(页面元素) 使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面 Console(控制台) 在开发期间,可以使用控制台面板记录诊断信...
  • ytulnj
  • ytulnj
  • 2017年07月27日 19:21
  • 65

JS随笔-HTML5图片轮播

jQuery部分$(".route_page1_img_slide img").swipe({//手动翻图片 swipe : function(event, direction, distance...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:复习HTML+CSS随笔
举报原因:
原因补充:

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