<!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. [Java] 缓存池

    new Integer(123) 与 Integer.valueOf(123) 的区别在于: new Integer(123) 每次都会新建一个对象: Integer.valueOf(123) 会使用 ...

  2. 【Python—待解惑的问题】

    疑问1: map()函数第一个参数接收函数,所以 dict.keys() 是函数?这个不是方法吗? map(dict.keys,s) s1.keys() == dict.keys(s1) 输入: Tr ...

  3. A Bite Of React(2) Component, Props and State

    component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...

  4. Nacos-服务注册地址为内网IP的解决办法

    最近在使用Spring Cloud Alibaba这一套微服务解决方案,但是在服务注册的时候,网关死活找不到微服务地址,自己的微服务通过网关怎么也访问不到. 查找原因 仔细一查才发现,网关去访问了一个 ...

  5. 使用批处理发布 QT 的程序

    1. 将 QT Creator 生成的 exe 文件拷贝到一个目录中 :C:\Users\zyy\Desktop\qtrelease 2.新建 bat 文件:qt.bat . 编辑文件,注意替换 QT ...

  6. Centos 进入recovery模式,单用户模式

    1.重启服务器,在选择内核界面使用上下箭头移动 2.选择内核并按“e” 3.找到下面这行 4.修改 这里要删除掉rhgb quiet,如下图 5.使用“ctrl + x” 来重启服务器就可以了,重启后 ...

  7. Django 模型层 ORM 操作

    运行环境 1. Django:2.1.3 version 2. PyMysql: 0.9.3 version 3. pip :19.0.3 version 4. python : 3.7 versio ...

  8. kvm的img文件的本机挂载

    非lvm分区挂载方法: mount -o loop xxx.img /mnt/xxx 系统提示: “mount: you must specify the filesystem type” 执行:fd ...

  9. Python第一章概述与环境安装

    Python简介 Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项 ...

  10. JavaSE---环境配置

    1.概述 1.1 PATH环境变量 a,Java程序   编译.运行时   需要用到java.javac命令,虽然计算机中已经安装了JDK,但是计算机不知道去哪里找这个命令: b,计算机如何查找命令呢 ...