HTML和CSS中一些有趣的
CSS Rese
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
垂直居中
要想一行文字在盒子中垂直居中只需要设置这行行高等于盒子高度line-height: 27px;
绝对定位下要写
left: 0;
top: 0;
绝对定位居中
position: absolute;
left: 50%;
margin-left: -宽度的一半px;
如果图片的宽度大于父元素的宽度
使用定位流让图片居中
父元素必须设置
text-align:center;
图片设置margin:0 -100%;
网页自动刷新
<meta http-equiv="refresh" content="10">
文章开头空两格
text-indent:2em;
设置字与字间距_字符间距离
letter-spacing: 2px;
水平分布对齐
display: flex;
justify-content: space-around;
垂直分布对齐
display: flex;
flex-flow: row wrap;
align-content:space-around;
规定可以由用户调整 div 元素的大小:
resize: vertical;
overflow: auto;
把此元素放置在父元素的中部。
vertical-align: middle;
HTML和CSS中一些有趣的的更多相关文章
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- 英文单词断行问题:CSS中word-break、word-wrap以及hyphens的兼容性和区别
CSS中一提到单词断行,最先映入脑海的肯定是word-break和word-wrap这两条属性.但对于这两条属性到底有什么区别,兼容性如何,我一直都概念模糊.今天抽空把它们以及CSS3中新加入的断行属 ...
随机推荐
- hdu1082
#include<iostream> #include<stack> #include<string> #include<cctype> using n ...
- APP中的存储路径
访问SD卡 所需权限 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/& ...
- 【leetcode 114. 二叉树展开为链表】解题报告
思路:递归,将左子树变成单链表形式,再将右子树变成单链表形式,最后将左子树单链表的末端连接到右子树单链表表头,将根节点的左孩子置空 void flatten(TreeNode* root) { if ...
- [WIP]php 基本语法
创建: 2019/06/14 https://www.php.net/manual/zh/langref.php php标记 当解析一个文件时,PHP 会寻找起始和结束标记,也就是 <?ph ...
- Solr 6.7学习笔记(02)-- 配置文件 managed-schema (schema.xml) -- 样例(6)
managed-schema 样例: <?xml version="1.0" encoding="UTF-8" ?> <!-- License ...
- 2017-10-6 清北刷题冲刺班a.m
1.角谷猜想 #include<iostream> #include<cstdio> #include<cstring> #define maxn 10010 us ...
- python 之 函数 基础2
5.36 命名关键字 什么是命名关键字参数? 格式:在*后面参数都是命名关键字参数 特点: 1 必须被传值 2 约束函数的调用者必须按照key=value的形式传值 3 约束函数的调用者必须用我们指定 ...
- Luogu P4144 大河的序列 贪心+脑子
首先向颜神犇致敬...还是自己太菜,又不仔细思考,上来就翻题解$qwq$ 首先有一种贪心方法:即,$ans=2*max(dirty_i)$ 证明:若现在的答案为$ans$,考虑一个新的数$x$对答案的 ...
- scrapy可视化管理工具spiderkeeper使用笔记
http://www.scrapyd.cn/doc/156.html 入门中文教程 spiderkeeper是一款开源的spider管理工具,可以方便的进行爬虫的启动,暂停,定时,同时可以查看分布式 ...
- shell命令学习
shell快速入门 http://www.jb51.net/article/28514.htm 1.http://www.cnblogs.com/zhutoujin/articles/4678743. ...