CSS Learning Record

慕课网上提供了前端工程师学习计划,这学期开始照着里面的步骤来学习。这篇文章主要用来记录一些零碎的知识点。

W3C标准--万维网联盟制定的一系列标准


倡导结构、样式、行为分离:

结构化标准语言--HTML&XML
样式标准语言--CSS
行为标准语言--js

3D盒子模型


3D盒子模型

元素分类


块状元素

<div>
<p>
<h1>...<h6>
<ol>
<ul>
<dl>
<table>
<address>
<blockquote>
<form>

内联元素(又叫行内元素)

<a>
<span>
<br>
<i>
<em>
<strong>
<label>
<q>
<var>
<cite>
<code>

内联块状元素

<img>
<input>

css三种定位机制


标准文档流

从上到下,从左到右,自动换行。

浮动

特点

元素会左移或右移,直到触碰到容器为止。

会影响紧邻其后的元素。

当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。

清除浮动的常用方法

  • clear属性--常用clear:both;(不推荐)
  • 同时设置width:100%(或固定宽度)+overflow:hidden;

绝对定位

定位


自动居中

#testdiv {
  width:80%;
  margin:0 auto;
}

auto会根据浏览器的宽度自动设置两边的外边距

外边距=( 浏览器的宽度-外包含层的宽度)/2

如果想让页面自动居中,当设置margin属性为auto的时候,不能再设置浮动或绝对定位属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,508评论 0 30
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 5,080评论 0 3
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,596评论 0 1
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 4,980评论 0 6

友情链接更多精彩内容