<!DOCTYPE html>

.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}

起床拥抱太阳

今天学习的内容有:

选择想要查看的内容

设置标签样式

  

给标签设置长短

  

可以使用display来更改它为行内标签

值 意义
display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

  

css盒子

值 意义
magin 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
padding 默 用于控制内容与边框之间的距离;
Border 围绕在内边距和内容外的边框。
Content 盒子的内容,显示文本和图像。

float

在 CSS 中,任何元素都可以浮动。



浮动元素会生成一个块级框,而不论它本身是何种元素。



关于浮动的两个特点:



浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

clear

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

清除浮动有三种方法

  • 固定高度
  • 伪元素清除法
  • overflow:hidden

值 描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

定位

static

static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

relative

用于让自己成为一个参照物

absolute

被设置为绝对定位的元素框

fixed

完全固定再浏览器的某位置

返回顶部

脱离文档流:


  绝对定位


  固定定位


不脱离文档流:


  相对定位

z-index

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁,数值大的压盖住数值小的,
  2. 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
  3. z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
  4. 从父现象:父亲怂了,儿子再牛逼也没用

opacity

用于调整透明度

用html写博客好麻烦的更多相关文章

  1. (转)[BetterExplained]为什么你应该(从现在开始就)写博客

    (一)为什么你应该(从现在开始就)写博客 用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处.(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极 ...

  2. 首个写博客的Android任务

    任务1 单击按钮图片选择器 使用TextView,RadioGroup,RadioButton完成. 设置单击按钮选择显示花朵. 首先设置了页面布局 <LinearLayout xmlns:an ...

  3. 用markdown写博客

    目录 用markdown写博客 前言 标题 段落 引用区块 代码块 列表 分隔线 链接 强调.加粗.下划线.删除线 图片 智能链接 表格 转义序列 用markdown写博客 前言 博客园支持用mark ...

  4. [BetterExplained]为什么你应该(从现在开始就)写博客

    (一)为什么你应该(从现在开始就)写博客 用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处.(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极 ...

  5. word 写博客,直接上传

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  6. 使用word写博客

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  7. 在word上写博客直接发到CSDN

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  8. 在word上写博客直接发到CSDN博客

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  9. word写博客

    虽然很多博客已经可以直接粘贴图片了但是如果图片比较多的话还是会很麻烦的.如果文章中只有一张图片那还好说,直接使用CSDN提供的编辑器粘贴就完了.但是我们的文档中一般图片都是多于1张的,经常是10张.如 ...

随机推荐

  1. Bellman-Ford&&SPFA算法详解

    Dijkstra在正权图上运行速度很快,但是它不能解决有负权的最短路,如下图: Dijkstra运行的结果是(以1为原点):0 2 12 6 14: 但手算的结果,dist[4]的结果显然是5,为什么 ...

  2. OpenCV2马拉松第9圈——再谈对照度(对照度拉伸,直方图均衡化)

    收入囊中 lookup table 对照度拉伸 直方图均衡化 葵花宝典 lookup table是什么东西呢? 举个样例,假设你想把图像颠倒一下,f[i] = 255-f[i],你会怎么做? for( ...

  3. js的this、bind、call、apply个人领悟

    this 1.非箭头函数: 如果是该函数是一个构造函数,this指针指向一个新的对象 在严格模式下的函数调用下,this指向undefined 如果是该函数是一个对象的方法,则它的this指针指向这个 ...

  4. React-Native初识-安卓篇(一)

    前言:React-Native简称RN,可以用来构建Android和IOS的应用程序,在接下来的两个半月里,我会记录下本人在学习RN开发项目中的点滴. 本篇目录: 1.React-Native初识 2 ...

  5. redis出现MISCONF Redis is configured to save RDB snapshots...的错误

    今天重启服务器在连接redis数据库时突然报错: MISCONF Redis is configured to save RDB snapshots, but it is currently not ...

  6. linux c 链接详解1-多目标文件链接

    1. 多目标文件的链接 摘自:linux c编程一站式学习 http://learn.akae.cn/media/index.html 可以学会在linux下将多个c语言文件一起编译. 现在我们把例  ...

  7. 服务器修改静态ip

    ifconfig,看当前网卡名字 设置 ip地址,子网掩码 ,广播地址 ifconfig eth1 172.16.11.25 netmask 255.255.255.0 broadcast 172.1 ...

  8. linux随笔-06

    用户身份与文件权限 用户身份与能力 Linux系统的管理员之所以是root,并不是因为它的名字叫root,而是因为该用户的身份号码即UID(User IDentification)的数值为0. 在Li ...

  9. Scratch 少儿编程

    作者:小码王在线少儿编程链接:https://www.zhihu.com/question/23418685/answer/762725469来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...

  10. linux 出现 -bash-4.2# 问题的解决方法

    1.在根目录创建 /root 目录 mkdir /root 2. 复制 .bashrc  以及 .bash_profile俩个文件到root目录下 cp /etc/skel/.bashrc /root ...