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的简单学习的更多相关文章

  1. html css的简单学习(三)

    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

  2. html css的简单学习(二)

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  3. HTML 与 css 的简单学习

    第21课: 内联元素,又称为行内元素,主要来控制一行内的字: 如: span,不是独占一行,不能设置宽高,竖直方向上不能设置 margin与 pading的值,不过水平方向上可以设置哦.(因为它只在一 ...

  4. css的简单学习笔记

    1.CSS的简介 *css :层叠样式表 **层叠: 一层一层. **样式表: 具有大量的属性和属性值 *使得页面的显示效果更加好. *css将网页内容和显示样式进行分离,提高了显示功能. *css不 ...

  5. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  6. <day006>bootstrap的简单学习 + 轮播图

    任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  7. Log4j简单学习笔记

    log4j结构图: 结构图展现出了log4j的主结构.logger:表示记录器,即数据来源:appender:输出源,即输出方式(如:控制台.文件...)layout:输出布局 Logger机滤器:常 ...

  8. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  9. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

随机推荐

  1. vmware虚拟机安装Windows 7后虚拟机自动挂起

    vmware虚拟机安装windows7后在一段时间中没有操作,虚拟机会自动挂起,是因为windows7中的设置的自动睡眠,打开[控制面板]=>[电源选项]=>[选择关闭显示器时间]将下面两 ...

  2. php curl使用例子

    PHP支持的由Daniel Stenberg创建的libcurl库允许你与各种的服务器使用各种类型的协议进行连接和通讯.libcurl目前支持http.https.ftp.gopher.telnet. ...

  3. python中字典的‘增、删、改、查’

    python 字典的'增.删.改.查' 用 ipython 运行情况如下: #新建字典 In [1]: infos = {'name':'dongge','age':18} In [2]: infos ...

  4. 设置vim 永久显示行号

    永久显示行号:如果想让vim永久显示行号,则需要修改vim配置文件vimrc.如果没有此文件可以创建一个.在启动vim时,当前用户根目录下的vimrc文件会被自动读取,因此一般在当前用户的根目录下创建 ...

  5. JAVA基础篇—String和StringBuffer

    区别: (1)String类对象为不可变对象,一旦你修改了String对象的值,隐性重新创建了一个新的对象,释放原String对象,StringBuffer类对象为可修改对象,可以通过append() ...

  6. HDU:2586-How far away

    How far away Time limit1000 ms Memory limit32768 kB Problem Description There are n houses in the vi ...

  7. debian 7 安装vagrant

    下载 vagrant_1.4.3_x86_64.deb: $ wget http://966b.http.dal05.cdn.softlayer.net/data-production/2f0b88e ...

  8. Centos7 安装 OwnCloud 私有云

    OwnCloud 一款文件主机服务软件,就是我们平时使用的云存储,不过这是在自己主机的服务器上建立属于自己的私有云,OwnCloud 使用AGPLv3协议发布.本项目是基于PHP和SQLite,MyS ...

  9. 使用像AdminLTE的前端框架,树形导航菜单实现方式都有哪些?

    之前用easyui等富前端框架开发的时候都是使用封装好的县城的插件,现在使用最新的类似AdminLTE似的前段框架实现树形菜单都用什么方式? 后台拼接html然后前端用JS append方法添加还是直 ...

  10. 手撸一套纯粹的CQRS实现

    关于CQRS,在实现上有很多差异,这是因为CQRS本身很简单,但是它犹如潘多拉魔盒的钥匙,有了它,读写分离.事件溯源.消息传递.最终一致性等都被引入了框架,从而导致CQRS背负了太多的混淆.本文旨在提 ...