学习CSS 笔记

时间:2021-12-26 19:26:35

1.动态修改div的大小

Html:

<div>
Hello
</div>

css:

div { resize:both; overflow:auto; }

2. box-sizing 决定width、height 与padding、border的关系

  (1). 默认情况下,box-sizing 的值是content-box, 这个时候width和height不包含padding和border

<div class="box">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
.box {
width: 800px;
height: 100px;
border: solid 5px red;
padding: 10px;
}
.left, .right {
border: solid 10px green;
padding: 10px;
margin: 10px;
box-sizing: content-box;
width: 340px;
float: left;
}

结果图:

            学习CSS 笔记

  如图所示,div 的width为340px,与css中所设一样

  (2). 如果我们把box-sizing的值设为border-box,  这个时候width和height就包含padding和border

<div class="box">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
.box {
width: 800px;
height: 100px;
border: solid 5px red;
padding: 10px;
}
.left, .right {
border: solid 10px green;
padding: 10px;
margin: 10px;
box-sizing: border-box;
width: 340px;
float: left;
}

结果如图:

             学习CSS 笔记

    如图所示,div 的width为300px,与css中所设不一样,差的40刚好是padding和border的

3. content属性与:after和:before的关系

(1)、伪元素:before和:after用法

这个两个伪元素在真正页面元素内部之前和之后添加新内容(当然了,可以对伪元素应用定位可以置于任何位置)。
可以用以下例子来说明:
<p>wonyun!</p><style>p:before{content:"hello "}p:after{content:"you are handsome!"}</style>
上面例子从技术角度看,等价于下面的html结构:
<p><span>hello </span>wonyun! <span>you are handsome!</span></p>
由此可知:
  伪元素:before和:after添加的内容默认是inline元素;这个两个伪元素的content属性,表示伪元素的内容,设置:before和:after时必须设置其content属性,否则伪元素就不起作用。
那么问题来了,content属性的值可以有哪些内容呢,具体有以下几种情况:
  a. 字符串,字符串作为伪元素的内容添加到主元素中
         注意:字符串中若有html字符串,添加到主元素后不会进行html转义,也不会转化为真正的html内容显示,而是会原样输出
      b. attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联,及其内容为主元素的某指定属性的值
      c. :可以通过js动态改变主元素的指定属性值,这时伪元素的内容也会跟着改变,可以实现某些特殊效果,如图片加载失败用一段文字替换。
      d. url()/uri(), 引用外部资源,例如图片;
      e. counter(), 调用计数器,可以不使用列表元素实现序号问题。

(2)、:before和:after特点

a. 上面说了,伪元素是通过样式来达到元素效果的,也就是说伪元素不占用dom元素节点,引用:before,:after伪元素妙用里面总结的,:before和:after伪元素的主要特点如下:
  伪元素不属于文档,所以js无法操作它
  伪元素属于主元素的一部分,因此点击伪元素触发的是主元素的click事件
  原文说块级元素才能有:before, :after,其实是不妥的,大部分行级元素也可以设置伪元素,但是像img可替换元素,因为其外观和尺寸有外部资源决定,那么如果外部资源正确加载,就会替换掉其内部内容,这时伪元素也会被替换掉,但是当外部资源加载失败时,设置的伪元素是可以起作用的。
 
b. 基于伪元素的特点可以知道其优缺点,也引用别人文章的话:
  * 优点 * 减少dom节点数 * 让css帮助解决部分js问题,让问题变得简单*缺点 * 不利于SEO * 无法审查元素,不利于调试

4.去掉点击input框时出现的默认边框

  

outline: none;

5.设置字符串里字符之间的距离

letter-spacing: 10px;

学习CSS 笔记的更多相关文章

  1. HTML&plus;CSS学习笔记 &lpar;6&rpar; - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  2. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. 如何深入学习CSS

    学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...

  5. 学习ThinkPHP笔记

    学习ThinkPHP笔记 TP的模块化设计 名称 描述 应用 基于同一个入口文件访问的项目我们称之为一个应用. 模块 一个应用下面可以包含多个模块,每个模块在应用目录下面都是一个独立的子目录. 控制器 ...

  6. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  7. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  8. DSP28377S - ADC学习编程笔记

    DSP28377S -  ADC学习编程笔记 彭会锋 2016-08-04  20:19:52 1 ADC类型导致的配置区别 F28377S的ADC类型是Type 4类型,我的理解是不同类型的ADC采 ...

  9. 开始学习css

    今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...

随机推荐

  1. 【Java学习系列】第3课--Java 高级教程

    本文地址 可以拜读: 从零开始学 Java 分享提纲: 1. Java数据结构 2. Java 集合框架 3. Java泛型 4. Java序列化 5. Java网络编程 6. Java发送Email ...

  2. Nodejs学习笔记(十二)--- 定时任务(node-schedule&rpar;

    目录 写在之前 Cron风格定时器 通配符解释 范围触发 递归规则定时器 对象文本语法定时器 取消定时器 写在之后 写在之前 在实际开发项目中,会遇到很多定时任务的工作.比如:定时导出某些数据.定时发 ...

  3. slot signal机制

    有一个比较 经典的实现:http://sigslot.sourceforge.net/很精简的 signal slot的实现,跨平台.webrtc项目在用,我在自己项目里也用了.这个源码有2000多行 ...

  4. Windows vista以上模拟Alt Ctrl Delete

    之前客户要求我们能够在windows登陆界面能够用指定账户批量控制机器登陆,然后用windows credentials provider(vista以上,xp需要用Gina)实现了这个功能,这期间遇 ...

  5. C&plus;&plus;类包含问题&lpar;重复包含和相互包含&rpar;

    一.重复包含头文件 头文件重复包含,可能会导致的错误包括:变量重定义,类型重定义及其他一些莫名其妙的错误.C++提供两种解决方案,分别是#ifndef和#pragma once #ifndef _SO ...

  6. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  7. MacOS搭建本地服务器

    MacOS搭建本地服务器 一,需求分析 1.1,开发app(ios android)时通常需往app中切入web页面,直接导入不行,故需搭建本地的测试网站服务,通过IP嵌入访问页面. 1.2,开发小程 ...

  8. codecombat之地牢关卡Python代码

    1.地牢 # 向宝石进发. # 小心撞墙! # 在下面输入你的代码. self.moveRight() self.moveDown() self.moveRight() 2.深藏的宝石 # 利用你的移 ...

  9. 三&period;HashMap原理及实现学习总结

    HashMap是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构.本篇主要是从HashMap的工作原理,数据结构分析,HashMap存储和读取几个方面对其进行学习总结.关于Hash ...

  10. CentOS7使用命令连接网络配置

    背景 在安装完CentOS7无桌面的情况下,无法使用桌面图标连接,如下图所示,这时我们需要在配置文件中配置网络连接信息. 步骤 查看ip地址:ifconfig PS:在未连接网络之前,我们是查看不到i ...