<!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. JVM系列(二) — Java垃圾收集介绍

    这篇文章主要从以下几个方面介绍垃圾收集的相关知识 一.判断对象是否已死 二.主流垃圾收集算法 三.内存分配与回收策略 本章节主要从以下几个思考点着手介绍垃圾回收的相关知识:哪些内存需要回收?什么时候回 ...

  2. C++中的面向对象(二)

    1,类之间的基本关系: 1,继承: 1,从已存在类细分出来的类和原类之间具有继承关系(is-a): 1,子类就是一个(is-a)父类: 2,继承是单向的: 2,继承的类(子类)拥有原类(父类)的所有属 ...

  3. SpringMVC学习(9):实现注解式权限验证

    对大部分系统来说都需要权限管理来决定不同用户可以看到哪些内容,那么如何在Spring MVC中实现权限验证呢?当然我们可以继续使用servlet中的过滤器Filter来实现.但借助于Spring MV ...

  4. 从一个Activity打开另外一个Activity

    public class MainActivity extends Activity { /** Called when the activity is first created. */ @Over ...

  5. RabbitMQ 在 Win10 环境下的安装与配置

    1 RabbitMQ 环境配置 1.1 ErLang 下载安装     RabbitMQ 需要 ErLang 环境支持:首先下载 ErLang 并安装.     建议使用新版本,版本过低存在与 Rab ...

  6. Provider

    import React from 'react';import PropTypes from 'prop-types'; class Provider extends React.Component ...

  7. 二、kubernetes搭建集群

    一.准备工作 主要内容 .环境准备(2主机) .安装流程 .问题分析 .总结 环境配置(2主机) 系统:CentOS 7.3 x64 网络:局域网(VPC) 主机: master:172.16.0.1 ...

  8. 解决VMwave下卡死的办法

    在VMwave路径下找到vmwave.log文件: 如上图所示:在资源监视器中找到name = vmwave-vmx.exe ,pid = 5940的进程,然后杀死.

  9. sql developer 中文乱码解决办法

    近日在fedora13中安装了oracle和sql developer,在英文环境下启动sql developer正常,可是切换到中文环境下就显示乱码.google了一下,确定是因为JDK不支持中文的 ...

  10. CH340电路设计

    版权声明:技术需要共享,但同时需要尊重原创者的辛劳,转载引用请注明出处. https://blog.csdn.net/JAZZSOLDIER/article/details/66967735 最近选用 ...