Html布局与CSS运用笔记

最新推荐文章于 2024-07-06 17:55:28 发布

_风凌_

最新推荐文章于 2024-07-06 17:55:28 发布

阅读量126

点赞数 1

分类专栏：前端文章标签： html5 css html

本文链接：https://blog.csdn.net/weixin_42795087/article/details/104658405

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

块元素标签与内联元素标签

块元素标签：默认占有一行，可以设置宽度和高度
内联元素标签：默认可以排列在一行，不能设置宽度和高度，宽度和高度由内容决定
* 图片标签和input标签是行内块元素,具有内联元素和块元素的特点(可以标签的宽高)

实体字符

1> &amp;     --> "&"
2> &yen;     -->人民币 "¥"
3> &copy;    -->版权 "©"
4> &times;   -->乘号 "×"
5> &divide;  -->除号 "÷"

锚点

1> 定义锚点: 
Ⅰ  <a name="锚点名"></a>
Ⅱ <a id="锚点名"></a>
2> 跳转锚点: 
Ⅰ  <a href="#锚点名">内容</a>
"#"表示不跳转

label标签

for + id 高亮选中表单
eg:
    <label for="username">用户名</label>
	<input type="text" id="username" name="username">
运行结果:
     鼠标单击用户名标签会高亮选中用户名的输入文本框

属性

1> 表单属性
checked="checked"     单选按钮/多选按钮 默认选中
selected="selected"   下拉列表 默认选中
disabled = "disabled" 禁止点击按钮
placeholder= "string" "string" 是用于占位的字符串
eg1:
    label>性&nbsp;别</label>
        <input type="radio" name="gender" value="0">男
        <input type="radio" name="gender" value="1">女
        <input type="radio" name="gender" value="3" checked="checked">保密
    运行结果:
    表单的性别默认选为保密
eg2:
    <label>籍&nbsp;贯</label>
		<select name="site">
			<option value="0">北京</option>
			<option value="1">上海</option>
			<option value="2">广州</option>
			<option value="3" selected="selected">上海</option>
		</select>
      运行结果:
      籍贯默认选中上海
eg3:
	<input type="button" value="普通按钮" disabled="disabled">
    运行结果:
	按钮变为灰色,无按钮效果
eg4:
    <label for="info">简&nbsp;介</label>
		<textarea name="info" id="info" cols="20" rows="10" placeholder="请输入个人简介">     </textarea>
     运行结果:
	 多行文本输入框在没有输入内容前显示占位的字符串,输入文本内容后占位字符串消失.
2>

样式

1> 表单样式
resize: none;       禁止修改多行文本框尺寸
outline:none;       设置input框获得焦点时，是否显示高亮的框线

2> 列表样式
list-style: none;   去掉列表项的小圆点

3> 块元素样式
 margin: auto;   设置块元素相对页面水平居中
4) 样式效果 
cursor: pointer;  光标移动到按钮上方显示手指

浮动

一.浮动的特点
  1) 浮动元素不占空间
  2) 浮动元素层级要高于普通元素半级
  3) 设置浮动的元素，一定是块元素
  4) 浮动可以横向排列
二.设置元素浮动
  1) 利用float属性
  2) 利用绝对定位(position: absolute;)与固定定位(position: fixed;)
  * 给元素设置绝对定位与相对定位会使元素脱离文档流，不占据文档流的位置	
  * 绝对定位是相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
三.浮动流
  浮动元素产生浮动流
  所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和具有文本属性(inline)的元素以及文本都能看到浮动元素.
  *即浮动元素不是分层,他对不同属性的元素会产生不同的效果(可以理解为对块元素不可见,对产生了BFC的元素和具有文本属性(inline)的元素可见)比如img和input标签是可见的因为他们具有inline属性
  *设置元素为浮动和修改元素具有inline属性都会触发BFC
 
四.清除浮动流
  清除浮动流的作用:解决块元素无法包裹浮动元素的问题
 方法一:
  <body>
	<div class="wrapper">
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
	</div>
   </body> 

<style>
		.wrapper{
			border: 1px solid red;
			float: left; 
          /* float: left;
			position: absolute;
			position: fixed;
			display: inline-block;*/
          //以上四种方式都可以,前三种系统会将元素装换成inline-block,会触发BFC,就能看到浮动元素
		}
		.content{
			float: left;
			color: white;
			background: black;
			width: 100px;
			height: 100px;
		}
	</style>

 方法二:
  <body>
	<div class="wrapper">
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
		<p></p>          //不需要定义内容,只要逻辑上存在就能撑开wrapper的边框线
	</div>
   </body> 

<style>
		.wrapper{
			border: 1px solid red;
		}
		.content{
			float: left;
			color: white;
			background: black;
			width: 100px;
			height: 100px;
		}
		p{
			clear: both;   //清除周边的浮动流
          # 语法：
          #   clear : none | left | right | both
		}
	</style>

  四.块级元素浮动之后的布局情况
 https://blog.csdn.net/qq_35485206/article/details/75020174

选择器

一. 选择器的使用
  一个类选择器可以被多个标签使用
  一个标签可以使用多个类
  class="类名1 类名2"

二. 伪类选择器
  1> hover选择器
   定义方法:
     .类名/标签名(比如p、a、span):hover{
       样式1;
       样式2;
       ...
     }
   类的使用方法:
    class="类名"
  2> link选择器
      定义方法同 2>
  3> visited选择器
      定义方法同 2>
  4> active选择器
      定义方法同 2>
  * 1>、2>、3>、4>总结:
  依次表示 鼠标悬停、未访问、已访问、鼠标点击 的样式
  不必单独定义类,可以同时定义类和伪类选择器

三. 属性选择器
	定义方法:
     .类名/标签名(比如p、a、span)[属性+条件+属性值]{
       样式1;
       样式2;
       ...
     }
  eg1:
   给指定类或标签满足属性条件的元素加样式
        /*给带有class属性的元素加样式*/
		.box li[class] { 
			font-size: 70px;
		}
		/*给带有class属性,且属性值为"one"元素加样式*/
		.box li[class="one"] { 
		    color: red;
		}
		 /*给带有class属性,且属性值以"col"开头的元素加样式*/
		.box li[class^="col"] {
			list-style: none;
		}
         /*给带有class属性,且属性值以"d"结尾的元素加样式*/
		.box li[class$="d"] { 
			color: green;
		}
	    /*给带有class属性,且属性值包含"o"的元素加样式*/
		.box li[class*="o"] { 
		    color: orange;
		}
		/*给带有type属性而且其属性值"text"的元素加样式*/
         input[type="text"]
          {
              width:150px;
              display:block;
              margin-bottom:10px;
              background-color:yellow;
          }

快捷键

ul>li*n                快速创建含有n个列表的列表标签
  eg1:
  ul>li*3 
  运行效果: 
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
ul>(li>a{列表文字})*n   快速创建含有n个列表的链接列表标签
  eg2:
  ul>(li>a{列表文字})*3
  运行效果:
  <li><a href="">列表文字</a></li>
  <li><a href="">列表文字</a></li>
  <li><a href="">列表文字</a></li>

div*n                  快速创建n个通用块容器标签
  eg3:
  div*3 + table键
  运行效果:
  <div></div>
  <div></div>
  <div></div>

Javascript浏览器调试

1) alert(调试信息);               --将调试信息以弹窗形式显示,会默认阻止程序执行
2) console.log(调试信息);         --将调试信息显示在Console控制台(路径:google浏览器-检查-Console)
3) document.write(调试信息);      --将调试信息添加到主窗口,且不覆盖原内容
4) document.title= 调试信息;      --将调试信息显示在浏览器标题栏
document.getElementsByTagName("标签名")[n].style.background = "green"; 
* n 表示标签名为"标签名"的第n个元素
访问body标签可以简写为: document.body.style.background = "red";

常见问题

图片并排排列图片之间会有间距
原因:凡是带有inline的元素都有文字属性(文字之间有空格或换行,且自带行间距)
eg:
书写方式1
  <img src="1.jpg" alt="1">
  <img src="1.jpg" alt="1">

书写方式2
  <img src="1.jpg" alt="1"><img src="1.jpg" alt="1">

输出结果:
方式1两图片横向会有8px(第一个图片右方的4px+第二个图片左方的4px)的间距,纵向会有4px的间距
方式2图片之间没有有间距
解决办法:
1) 按方式1书写(只能解决横向间距的问题<建议书写方式>)
2) 设置img样式(通过将外边距设置为负值删除间距)
  img{
    margin-left: -8px;
  }

_风凌_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html布局与CSS运用笔记

块元素标签与内联元素标签块元素标签：默认占有一行，可以设置宽度和高度内联元素标签：默认可以排列在一行，不能设置宽度和高度，宽度和高度由内容决定* 图片标签和input标签是行内块元素,具有内联元素和块元素的特点(可以标签的宽高)实体字符1> &amp; --> "&"2> &yen; -->人民币 "¥"3> &...
复制链接

扫一扫