html css的简单学习
html css的简单学习
css的内边距:
padding (auto、length、%)(顺序:上、右、下、左)
padding-top
padding-left
padding-right
padding-bottom
示例:
*{padding:10px 20px 30px 40px} //顺序:上、右、下、左
===========================================================
css中的外边距:
margin (auto、length、%)(顺序:上、右、下、左)
margin-top
margin-left
margin-right
margin-bottom
=============================================================
css的定位:
普通流、浮动、绝对定位。
使用浮动元素或者元素定位后,会生成一个块级框,不论本身是何种元素。
css的定位属性:
position 把元素放置到一个静态的、相对的、绝对的、固定的位置中。
top 定义了一个定位元素的上边距边界与其包含块上边界之间的偏移。
right 定义了一个定位元素的右外边距边界与其包含块右边界之间的偏移。
bottom 定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
left 定义了一个定位元素的左外边距边界与其包含块左边界之间的偏移。
overflow 设置元素的内容溢出其区域时发生的事情。
clip 设置元素的形状,元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
position属性:
static 默认值,没有定位,占用页面空间;
relative 相对定位,占用页面空间,基于父级的定位,可能会覆盖其他元素;
absolute 绝对定位,不占用页面空间。
fixed 固定定位,不占用页面空间。
示例:
.box{
width:100px;
height:100px;
border:1px solid red;
position:relative;
top:20px;
left:20%;//基于父级
}
浮动:可以使块级元素变行级元素。
float (left、right)
clear 清除浮动,(left、right、both),浮动会造成不占用父级空间,清除后可以
把父级撑起来。
示例:
.box{width:100px;height:100px;float:left}
============================================================================
cursor:pointer;//鼠标移上去,显示小手
设置弧度/曲面(x轴位移 y轴位移 阴影宽度 颜色 内部/外部 )
box-shadow:0px 5px 20px #1F4612 inset;
设置圆角:
border-radius:5px;//一个值就是四个角都圆角
border-top-left-radius:5px;//只设置左上角为圆角
overflow:hidden; //允许子级元素撑开父级元素,超出部分隐藏
.clear{-ms-zoom:1} //针对IE,
.clear:after{content:'';display:block;clear:both;}//使用伪类,撑开父级元素
clear类放在父级元素上。
========================================================================
width和max-width:
设置width,浏览器的宽度发生变化时可能会出现滚动条。
max-width不会出现滚动条。
========================================================================
background-position:0 30px;//设置背景的位置
===================================================================
谷歌浏览器插件---谷歌访问助手:
http://www.ggfwzs.com/230/chrome.zip
==============================================================
Subline text3插件:
ctrl+shift+p 显示控制台
=================================================
Atom是一款免费的编辑器。
====================================================================
搭建BrowserSync运行环境,浏览器不刷新就可以看到效果:
1、下载node.js;
2、安装BrowerSync包;
3、切换到项目目录;
4、启动BrowerSync服务。
网址:www.browersync.cn
===================================================================
html css的简单学习的更多相关文章
- html css的简单学习(三)
html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...
- html css的简单学习(二)
html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...
- HTML 与 css 的简单学习
第21课: 内联元素,又称为行内元素,主要来控制一行内的字: 如: span,不是独占一行,不能设置宽高,竖直方向上不能设置 margin与 pading的值,不过水平方向上可以设置哦.(因为它只在一 ...
- css的简单学习笔记
1.CSS的简介 *css :层叠样式表 **层叠: 一层一层. **样式表: 具有大量的属性和属性值 *使得页面的显示效果更加好. *css将网页内容和显示样式进行分离,提高了显示功能. *css不 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- <day006>bootstrap的简单学习 + 轮播图
任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...
- Log4j简单学习笔记
log4j结构图: 结构图展现出了log4j的主结构.logger:表示记录器,即数据来源:appender:输出源,即输出方式(如:控制台.文件...)layout:输出布局 Logger机滤器:常 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- css和css3学习
css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...
随机推荐
- vmware虚拟机安装Windows 7后虚拟机自动挂起
vmware虚拟机安装windows7后在一段时间中没有操作,虚拟机会自动挂起,是因为windows7中的设置的自动睡眠,打开[控制面板]=>[电源选项]=>[选择关闭显示器时间]将下面两 ...
- php curl使用例子
PHP支持的由Daniel Stenberg创建的libcurl库允许你与各种的服务器使用各种类型的协议进行连接和通讯.libcurl目前支持http.https.ftp.gopher.telnet. ...
- python中字典的‘增、删、改、查’
python 字典的'增.删.改.查' 用 ipython 运行情况如下: #新建字典 In [1]: infos = {'name':'dongge','age':18} In [2]: infos ...
- 设置vim 永久显示行号
永久显示行号:如果想让vim永久显示行号,则需要修改vim配置文件vimrc.如果没有此文件可以创建一个.在启动vim时,当前用户根目录下的vimrc文件会被自动读取,因此一般在当前用户的根目录下创建 ...
- JAVA基础篇—String和StringBuffer
区别: (1)String类对象为不可变对象,一旦你修改了String对象的值,隐性重新创建了一个新的对象,释放原String对象,StringBuffer类对象为可修改对象,可以通过append() ...
- HDU:2586-How far away
How far away Time limit1000 ms Memory limit32768 kB Problem Description There are n houses in the vi ...
- debian 7 安装vagrant
下载 vagrant_1.4.3_x86_64.deb: $ wget http://966b.http.dal05.cdn.softlayer.net/data-production/2f0b88e ...
- Centos7 安装 OwnCloud 私有云
OwnCloud 一款文件主机服务软件,就是我们平时使用的云存储,不过这是在自己主机的服务器上建立属于自己的私有云,OwnCloud 使用AGPLv3协议发布.本项目是基于PHP和SQLite,MyS ...
- 使用像AdminLTE的前端框架,树形导航菜单实现方式都有哪些?
之前用easyui等富前端框架开发的时候都是使用封装好的县城的插件,现在使用最新的类似AdminLTE似的前段框架实现树形菜单都用什么方式? 后台拼接html然后前端用JS append方法添加还是直 ...
- 手撸一套纯粹的CQRS实现
关于CQRS,在实现上有很多差异,这是因为CQRS本身很简单,但是它犹如潘多拉魔盒的钥匙,有了它,读写分离.事件溯源.消息传递.最终一致性等都被引入了框架,从而导致CQRS背负了太多的混淆.本文旨在提 ...