10.1练习总结【清除浮动、搜索框、div*3同行、placeholder样式】

一、常用清除浮动

1、父级添加overflow:hidden ;


overflow: hidden;

2、父级定义伪类:after

.clearfix::after {    content: ‘‘;   clear: both;   display: block; }

参考:https://www.cnblogs.com/nxl0908/p/7245460.html

二、搜索框

<div class="searchbar">
      <form>
          <input type="search" />
          <input type="submit" value="" />
      </form>
</div>

三、3个div同行

.left, .middle, .right {
  width: 31%;
  float: left;
  margin: 0 1%;
}

四、placeholder 样式修改

::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
:-moz-placeholder{}                  /* Firefox版本4-18 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-ms-input-placeholder{}           /* IE浏览器 */

四、li换行问题

float (换行li)
1、ul不用给宽高,甚至不用设置
2、li用float:left; margin:10px; 轻松换行

flex (适用一排多列不被挤)1、ul给display:flex;justify-content: space-around; 依然是横排,解决方法: ul加 flex-wrap: wrap;


原文地址:https://www.cnblogs.com/Lehh/p/11620719.html

时间: 2024-10-28 06:22:58

10.1练习总结【清除浮动、搜索框、div*3同行、placeholder样式】的相关文章

android浮动搜索框

android浮动搜索框的配置比较繁琐,需要配置好xml文件才能实现onSearchRequest()方法. 1.配置搜索的XML配置文件?,新建文件searchable.xml,保存在res/xml文件夹中. 1 <?xml version="1.0" encoding="UTF-8"?> 2 3 <searchable android:label="@string/search_label" 4 android:search

搜索框 - div中input自适应

当需要开发如上这样一个搜索框时. 因为是移动端开发,手机屏幕宽度的不确定性,所以不能使用平时的定宽开发. 分析如上图: 1.该搜索框由两部分组成:input搜索框+取消按钮: 2.搜索框距离左右两边的距离是固定的,即图中1和2相等: 3.取消按钮的大小是固定的,以及距离input距离是固定的: 4.input随着屏幕宽度的变化自适应变化. 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo

android浮动搜索框的使用

引言 在我们的应用程序中经常需要提供搜索服务,比如搜索联系人, 搜索商品信息等等.我们可以自己在布局中自定义我们的搜索框,实现我们的搜索逻辑.但是还有一种更简单的方法:使用android系统给我们提供的搜索功能框架. 在android中,提供两种实现搜索功能的方式:search dialog 和 searchView. search dialog类似于普通的dialog,悬浮于我们的窗体之上.示例图如下: searchView通常被嵌套在我们的布局之中,最典型的案例就是在actionBar中使用

css中元素的浮动和清除浮动的影响

用float属性可以使元素浮动到包含框内的左右边使文本围绕它,这里创建一个包含框内有段落和一个小的div并被包围: <html> <head> <title><title> <style type="text/css"> div{ border:1px solid red; width:200px; height:200px; } .div1{ background-color:yellow; float:right; wid

“清除浮动”的几种方法

1. “清除浮动” ??准确的描述应该是“清楚浮动造成的影响” 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内联img元素,此时div的高应该是图片img撑开的高度,当设置了图片img元素设置浮动后,div高度就会坍塌 浮动导致高度坍陷代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl

iOS - Swift UISearchController仿微信搜索框

0x01.创建一个UISearchController 如果传入的searchController为nil,则表示搜索的结果在当前控制器中显示,现在我让它在searchVC中显示. // 创建searchResultVC let searchVC = UIViewController() // 设置背景颜色为红色 searchVC.view.backgroundColor = UIColor.red let searchController = UISearchController(search

搜索框与搜索按钮并排——无缝对接

1.效果图 难点在于搜索框与搜索按钮要无缝对接 2.实现 (1)搜索框的高度(height+上下border)==搜索按钮的高度 (2)搜索框的字体大小.样式==搜索按钮中的字体大小.样式 (3)搜索框和搜索按钮都要去掉边框:outline:none;当然 搜索按钮需要再加上一个border:none; 3.代码 html代码: <div class="search"> <input type="text" id="in" va

css中清除浮动的方法

1.浮动后会影响别的元素,可以用clear:both来清除浮动. 例如<div class="box1"></div> <div class="box2"></div> css: .box1{ float:left;}     .box2{ clear:both ; } 2.子级浮动会导致父级高度塌陷,可以使用overflow:hidden找回高度

CSS(7)--- 通俗讲解清除浮动

CSS(7)--- 通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效果的,但是被我们拿来做布局用,则会有很多的问题出现. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动. 准确地说,并不是清除浮动,而是清除浮动后造成的影响 2.清除浮动本质 清除浮动的本质: 主要为了解决父级元素因为子级浮动引起内